.univer-avatar {
    position: relative;
    overflow: hidden;
    display: inline-block;
    color: rgb(var(--bg-color-secondary));
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background: rgb(var(--grey-200))
}

.univer-avatar-square {
    border-radius: var(--border-radius-base)
}

.univer-avatar-circle {
    border-radius: 50%
}

.univer-avatar-middle {
    width: 34px;
    height: 34px;
    line-height: 34px
}

.univer-avatar-small {
    width: 28px;
    height: 28px;
    line-height: 28px
}

.univer-avatar-image {
    background: transparent
}

.univer-avatar-image>img {
    display: block;
    width: 100%;
    height: 100%
}

.univer-button {
    cursor: pointer;
    user-select: none;
    position: relative;
    display: inline-block;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base);
    transition: all .15s
}

.univer-button[disabled] {
    cursor: not-allowed;
    color: rgb(var(--grey-300))
}

.univer-button-default {
    font-weight: 400;
    color: rgb(var(--text-color));
    background-color: rgb(var(--bg-color-secondary))
}

.univer-button-default[disabled]:hover {
    color: rgb(var(--grey-300));
    border-color: rgb(var(--border-color))
}

.univer-button-default:hover {
    color: rgb(var(--primary-color));
    border-color: rgb(var(--primary-color))
}

.univer-button-primary {
    font-weight: 500;
    color: rgb(var(--color-white));
    background-color: rgb(var(--primary-color));
    border-color: rgb(var(--primary-color))
}

.univer-button-primary[disabled] {
    background-color: rgb(var(--bg-color-secondary));
    border-color: rgb(var(--border-color))
}

.univer-button-primary[disabled]:hover {
    color: rgb(var(--grey-300));
    background-color: rgb(var(--bg-color-secondary));
    border-color: rgb(var(--border-color))
}

.univer-button-primary:hover {
    color: rgb(var(--color-white));
    background-color: rgb(var(--primary-color-hover));
    border-color: rgb(var(--primary-color-hover))
}

.univer-button-text {
    color: rgb(var(--text-color));
    background-color: transparent;
    border-color: transparent
}

.univer-button-text[disabled]:hover {
    background-color: transparent
}

.univer-button-text:hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-button-link {
    color: rgb(var(--primary-color));
    background-color: transparent;
    border-color: transparent
}

.univer-button-link[disabled]:hover {
    background-color: transparent
}

.univer-button-link:hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-button-small {
    padding: 6px 8px;
    font-size: var(--font-size-sm)
}

.univer-button-middle {
    padding: 8px 12px;
    font-size: var(--font-size-base)
}

.univer-button-large {
    padding: 10px 20px;
    font-size: var(--font-size-base)
}

.univer-button-block {
    width: 100%
}

.univer-cascader-list {
    overflow-y: auto;
    display: flex;
    height: 100%;
    max-height: 348px;
    padding: var(--padding-sm);
    color: rgb(var(--text-color));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base)
}

.univer-cascader-list-board {
    overflow: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none
}

.univer-cascader-list-board:not(:last-child) {
    margin-right: var(--margin-xs);
    padding-right: var(--padding-sm);
    border-right: 1px solid rgb(var(--border-color))
}

.univer-cascader-list-board:first-child .univer-cascader-list-item-active {
    color: rgb(var(--primary-color))
}

.univer-cascader-list-board:first-child .univer-cascader-list-option {
    padding: var(--padding-xs) 0
}

.univer-cascader-list-board:first-child .univer-cascader-list-check-mark {
    display: none
}

.univer-cascader-list-board:not(:first-child) .univer-cascader-list-item-active {
    background-color: rgb(var(--bg-color-hover))
}

.univer-cascader-list-board:not(:first-child) .univer-cascader-list-option {
    padding: var(--padding-xs) 28px
}

.univer-cascader-list-item {
    border-radius: var(--border-radius-base)
}

.univer-cascader-list-option {
    cursor: pointer;
    position: relative;
    display: block;
    font-size: var(--font-size-xs)
}

.univer-cascader-list-check-mark {
    position: absolute;
    top: 50%;
    left: var(--margin-xs);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    font-size: var(--font-size-lg);
    color: rgb(var(--primary-color))
}

.univer-cascader-list-empty {
    padding-right: 120px;
    font-size: var(--font-size-xs);
    color: rgb(var(--text-color-secondary))
}

.univer-checkbox {
    cursor: pointer;
    display: inline-flex;
    gap: var(--margin-xs);
    align-items: center;
    box-sizing: border-box;
    font-size: var(--font-size-sm);
    color: var(--text-color)
}

.univer-checkbox:hover .univer-checkbox-target-input:checked+.univer-checkbox-target-inner {
    background-color: rgb(var(--primary-color-hover))
}

.univer-checkbox:hover .univer-checkbox-target-inner {
    border-color: rgb(var(--primary-color-hover))
}

.univer-checkbox-disabled {
    cursor: not-allowed;
    color: rgb(var(--grey-300))
}

.univer-checkbox-disabled .univer-checkbox-target-input:checked+.univer-checkbox-target-inner {
    background-color: rgb(var(--grey-300))
}

.univer-checkbox-disabled .univer-checkbox-target-inner {
    border-color: rgb(var(--grey-300))
}

.univer-checkbox-disabled:hover .univer-checkbox-target-input:checked+.univer-checkbox-target-inner {
    background-color: rgb(var(--grey-300))
}

.univer-checkbox-disabled:hover .univer-checkbox-target-inner {
    border-color: rgb(var(--grey-300))
}

.univer-checkbox-disabled.univer-checkbox-indeterminate .univer-checkbox-target-inner {
    background-color: rgb(var(--grey-300))
}

.univer-checkbox-indeterminate .univer-checkbox-target-inner {
    background-color: rgb(var(--primary-color))
}

.univer-checkbox-indeterminate .univer-checkbox-target-inner:after {
    top: 50%;
    left: 50%;
    width: calc(100% - 2px);
    height: 2px;
    background-color: rgb(var(--bg-color-secondary));
    border: none;
    border-radius: var(--border-radius-base);
    opacity: 1;
    transform: translate(-50%,-50%)
}

.univer-checkbox-target {
    position: relative
}

.univer-checkbox-target-input {
    position: absolute;
    opacity: 0
}

.univer-checkbox-target-input:checked+.univer-checkbox-target-inner {
    background-color: rgb(var(--primary-color))
}

.univer-checkbox-target-input:checked+.univer-checkbox-target-inner:after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
    border-color: rgb(var(--bg-color-secondary))
}

.univer-checkbox-target-inner {
    position: relative;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid rgb(var(--primary-color));
    border-radius: var(--border-radius-base);
    transition: all .15s
}

.univer-checkbox-target-inner:after {
    content: "";
    position: absolute;
    top: calc(50% - 5.5px);
    left: calc(50% - 2.5px);
    transform-origin: center center;
    transform: rotate(45deg) scale(0);
    display: block;
    box-sizing: border-box;
    width: calc(14px / 2.6);
    height: calc(14px / 1.5);
    opacity: 0;
    border: 2px solid transparent;
    border-top: 0;
    border-left: 0;
    transition: all .15s
}

.univer-checkbox-group {
    display: flex;
    gap: var(--margin-sm)
}

.univer-checkbox-group-direction-vertical {
    flex-direction: column
}

.univer-color-picker {
    position: absolute;
    z-index: 1;
    display: block;
    width: max-content;
    min-width: 232px;
    visibility: visible
}

.univer-color-picker-hidden {
    display: none
}

.univer-color-picker-panel {
    display: flex;
    flex-direction: column;
    width: 232px;
    background-color: rgb(var(--white-color));
    border-radius: 8px
}

.univer-color-picker-panel-disabled {
    cursor: not-allowed
}

.univer-color-picker-select {
    margin-bottom: var(--margin-xs)
}

.univer-color-picker-select .univer-color-picker-palette {
    overflow: hidden;
    min-height: 100px;
    border-radius: 4px
}

.univer-color-picker-select .univer-color-picker-palette>.univer-color-picker-gradient {
    border-top-left-radius: 5px
}

.univer-color-picker-saturation {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit
}

.univer-color-picker-handler {
    transform: translateY(-1px);
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 1px 1px #0000000f
}

.univer-color-picker-slider {
    width: 100%
}

.univer-color-picker-slider .univer-color-picker-palette {
    height: 8px
}

.univer-color-picker-slider .univer-color-picker-gradient {
    border-radius: 4px
}

.univer-color-picker-color-blocks {
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(9,1fr);
    gap: var(--margin-xxs);
    width: 232px;
    margin-bottom: var(--margin-xs)
}

.univer-color-picker-color-block {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 18px;
    height: 18px;
    border-radius: 4px
}

.univer-color-picker-color-block-inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid rgb(var(--grey-600));
    border-radius: 4px
}

.univer-color-picker-slider-container {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--margin-sm)
}

.univer-color-picker-slider-container .univer-color-picker-slider-group {
    flex: 1
}

.univer-color-picker-slider-container .univer-color-picker-slider-group-disabled-alpha {
    display: flex;
    align-items: center
}

.univer-color-picker-slider-container .univer-color-picker-slider-group-disabled-alpha .univer-color-picker-slider {
    margin-bottom: 0
}

.univer-dialog {
    position: relative;
    width: 640px;
    margin: 10% auto
}

.univer-dialog-wrap {
    position: fixed;
    z-index: 1050;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    outline: 0;
    -webkit-overflow-scrolling: touch
}

.univer-dialog-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 500
}

.univer-dialog-title-content {
    padding: 24px 28px 20px;
    box-sizing: border-box
}

.univer-dialog-content {
    pointer-events: all;
    position: relative;
    color: rgb(var(--text-color));
    background-color: rgb(var(--bg-color-secondary));
    background-clip: padding-box;
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-base)
}

.univer-dialog-close {
    cursor: pointer;
    position: absolute;
    top: 24px;
    right: 28px;
    padding: 0;
    font-size: var(--font-size-lg);
    font-weight: 500;
    line-height: 1;
    color: rgb(var(--grey-500));
    text-decoration: none;
    opacity: .2;
    background: transparent;
    border: 0
}

.univer-dialog-close:hover {
    text-decoration: none;
    opacity: 1
}

.univer-dialog-header {
    box-sizing: border-box;
    color: rgb(var(--text-color));
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0
}

.univer-dialog-body {
    padding: 0 28px 20px
}

.univer-dialog-footer {
    padding: 0 28px 24px;
    text-align: right;
    border-radius: 0 0 5px 5px
}

.univer-dialog-zoom-enter,.univer-dialog-zoom-appear {
    opacity: 0;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(.08,.82,.17,1);
    animation-duration: .3s;
    animation-fill-mode: both
}

.univer-dialog-zoom-leave {
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(.6,.04,.98,.34)
}

.univer-dialog-zoom-enter.univer-dialog-zoom-enter-active,.univer-dialog-zoom-appear.univer-dialog-zoom-appear-active {
    animation-name: univer-dialog-zoom-in;
    animation-play-state: running
}

.univer-dialog-zoom-leave.univer-dialog-zoom-leave-active {
    animation-name: univer-dialog-zoom-out;
    animation-play-state: running
}

@keyframes univer-dialog-zoom-in {
    0% {
        transform: scale(0);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes univer-dialog-zoom-out {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(0);
        opacity: 0
    }
}

.univer-dialog-mask {
    position: fixed;
    z-index: 1050;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    background-color: #00000080
}

.univer-dialog-mask-hidden {
    display: none
}

.univer-dialog-fade-enter,.univer-dialog-fade-appear {
    opacity: 0;
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.55,0,.55,.2);
    animation-fill-mode: both;
    animation-play-state: paused
}

.univer-dialog-fade-leave {
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.55,0,.55,.2);
    animation-fill-mode: both;
    animation-play-state: paused
}

.univer-dialog-fade-enter.univer-dialog-fade-enter-active,.univer-dialog-fade-appear.univer-dialog-fade-appear-active {
    animation-name: univer-dialog-fade-in;
    animation-play-state: running
}

.univer-dialog-fade-leave.univer-dialog-fade-leave-active {
    animation-name: univer-dialog-fade-out;
    animation-play-state: running
}

@keyframes univer-dialog-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes univer-dialog-fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.univer-dialog-root-draggable {
    pointer-events: none
}

.univer-confirm-footer {
    display: flex;
    gap: var(--margin-sm);
    justify-content: flex-end
}

.univer-date-picker {
    position: relative;
    width: 200px;
    height: 32px;
    border: 1px solid rgb(var(--border-color));
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-flex
}

.univer-date-picker-rtl {
    direction: rtl
}

.univer-date-picker-invalid {
    box-shadow: 0 0 2px red
}

.univer-date-picker-panel {
    display: inline-block;
    vertical-align: top
}

.univer-date-picker-panel-focused {
    border-color: #00f
}

.univer-date-picker-panel-rtl {
    direction: rtl
}

.univer-date-picker-suffix-icon {
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 8px;
    color: rgb(var(--text-color-secondary));
    transform: translateY(-50%);
    cursor: pointer
}

.univer-date-picker-decade-panel,.univer-date-picker-year-panel,.univer-date-picker-month-panel,.univer-date-picker-week-panel,.univer-date-picker-date-panel,.univer-date-picker-time-panel {
    display: flex;
    flex-direction: column
}

.univer-date-picker-decade-panel table,.univer-date-picker-year-panel table,.univer-date-picker-month-panel table,.univer-date-picker-week-panel table,.univer-date-picker-date-panel table,.univer-date-picker-time-panel table {
    text-align: center;
    border-collapse: collapse
}

.univer-date-picker-header {
    margin-bottom: var(--margin-base);
    display: flex;
    align-items: center
}

.univer-date-picker-header>* {
    flex: none
}

.univer-date-picker-header-view {
    height: 16px;
    flex: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--margin-xs)
}

.univer-date-picker-header-view>button {
    padding: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer
}

.univer-date-picker-header-super-prev-btn,.univer-date-picker-header-super-next-btn,.univer-date-picker-header-prev-btn,.univer-date-picker-header-next-btn {
    width: 16px;
    height: 16px;
    padding: 0;
    line-height: 16px;
    font-size: var(--font-size-lg);
    border: none;
    background-color: transparent;
    cursor: pointer
}

.univer-date-picker-cell {
    color: #aaa
}

.univer-date-picker-cell-disabled {
    opacity: .2
}

.univer-date-picker-cell-inner {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 24px;
    background: transparent;
    border: 0;
    border-radius: var(--border-radius-base);
    outline: none;
    cursor: pointer;
    transition: background .3s
}

.univer-date-picker-cell-in-view {
    color: #333
}

.univer-date-picker-cell-in-range>.univer-date-picker-cell-inner {
    background: #0000ff0d
}

.univer-date-picker-cell-hover>.univer-date-picker-cell-inner {
    background: rgb(var(--bg-color))
}

.univer-date-picker-cell-range-hover-start,.univer-date-picker-cell-range-hover-end,.univer-date-picker-cell-range-hover {
    position: relative
}

.univer-date-picker-cell-range-hover-start:after,.univer-date-picker-cell-range-hover-end:after,.univer-date-picker-cell-range-hover:after {
    position: absolute;
    top: 3px;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid green;
    border-right: 0;
    border-left: 0;
    content: "";
    pointer-events: none
}

.univer-date-picker-cell-range-hover-start:after {
    border-left: 1px solid green!important
}

.univer-date-picker-cell-range-hover-end:after {
    border-right: 1px solid green!important
}

.univer-date-picker-cell-today>.univer-date-picker-cell-inner {
    border: 1px solid rgb(var(--primary-color))
}

.univer-date-picker-cell-range-start>.univer-date-picker-cell-inner,.univer-date-picker-cell-range-end>.univer-date-picker-cell-inner,.univer-date-picker-cell-selected>.univer-date-picker-cell-inner {
    color: #fff;
    background: rgb(var(--primary-color))
}

.univer-date-picker-presets {
    background: #ccf
}

.univer-date-picker-presets ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.univer-date-picker-now {
    padding-top: var(--padding-base)
}

.univer-date-picker-now-btn {
    font-size: var(--font-size-xs);
    color: rgb(var(--primary-color));
    cursor: pointer
}

.univer-date-picker-footer,.univer-date-picker-picker-footer {
    margin-top: var(--margin-sm);
    border-top: 1px solid rgb(var(--border-color))
}

.univer-date-picker-ranges {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none
}

.univer-date-picker-ranges>li {
    text-align: center;
    display: block
}

.univer-date-picker-ok {
    float: right
}

.univer-date-picker-decade-panel .univer-date-picker-content tbody {
    display: grid;
    gap: 20px
}

.univer-date-picker-decade-panel .univer-date-picker-cell-inner {
    width: 78px;
    height: 24px
}

.univer-date-picker-year-panel .univer-date-picker-content tbody,.univer-date-picker-month-panel .univer-date-picker-content tbody {
    display: grid;
    gap: 20px
}

.univer-date-picker-year-panel .univer-date-picker-cell-inner,.univer-date-picker-month-panel .univer-date-picker-cell-inner {
    width: 48px;
    height: 24px
}

.univer-date-picker-week-panel-row:hover .univer-date-picker-cell {
    background: red
}

.univer-date-picker-week-panel-row-selected .univer-date-picker-cell {
    background: #0000ff4d
}

.univer-date-picker-week-panel-row-range-hover .univer-date-picker-cell {
    background: #00ff001a
}

.univer-date-picker-week-panel-row-range-start .univer-date-picker-cell,.univer-date-picker-week-panel-row-range-end .univer-date-picker-cell {
    background: #00ff004d
}

.univer-date-picker-week-panel .univer-date-picker-cell,.univer-date-picker-week-panel .univer-date-picker-cell-inner {
    width: 24px
}

.univer-date-picker-week-panel .univer-date-picker-cell-week {
    color: #999;
    font-weight: 700;
    font-size: 12px
}

.univer-date-picker-week-panel .univer-date-picker-cell:hover>.univer-date-picker-cell-inner,.univer-date-picker-week-panel .univer-date-picker-cell-selected>.univer-date-picker-cell-inner {
    background: transparent
}

.univer-date-picker-date-panel .univer-date-picker-cell-inner {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xs)
}

.univer-date-picker-time-panel {
    width: auto
}

.univer-date-picker-time-panel .univer-date-picker-content {
    position: relative;
    display: flex;
    max-height: 200px
}

.univer-date-picker-time-panel-column-title {
    font-size: 14px;
    line-height: 24px
}

.univer-date-picker-time-panel-column {
    flex: auto;
    width: 50px;
    margin: 0;
    padding: 0 0 180px;
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 12px;
    text-align: left;
    list-style: none;
    transition: background .3s
}

.univer-date-picker-time-panel-column-active {
    background: #0000ff1a
}

.univer-date-picker-time-panel-column:hover {
    overflow-y: auto
}

.univer-date-picker-time-panel-column>li {
    width: 50px;
    margin: 0;
    padding: 0;
    cursor: pointer
}

.univer-date-picker-time-panel-column>li.univer-date-picker-time-panel-cell-disabled {
    opacity: .5
}

.univer-date-picker-time-panel-column>li.univer-date-picker-time-panel-cell-selected {
    background: #0000ff80
}

.univer-date-picker-time-panel-column>li .univer-date-picker-time-panel-cell-inner {
    display: block;
    width: 100%;
    height: 24px;
    margin: 0;
    color: #333;
    line-height: 24px;
    text-align: center
}

.univer-date-picker-panel-rtl .univer-date-picker-time-panel-column>li .univer-date-picker-time-panel-cell-inner {
    padding: 0 12px 0 0;
    text-align: right
}

.univer-date-picker-datetime-panel {
    display: flex
}

.univer-date-picker-datetime-panel .univer-date-picker-time-panel {
    border-left: 1px solid #999
}

.univer-date-picker-datetime-panel .univer-date-picker-date-panel,.univer-date-picker-datetime-panel .univer-date-picker-time-panel {
    transition: opacity .3s
}

.univer-date-picker-datetime-panel-active .univer-date-picker-date-panel,.univer-date-picker-datetime-panel-active .univer-date-picker-time-panel {
    opacity: .3
}

.univer-date-picker-datetime-panel-active .univer-date-picker-date-panel-active,.univer-date-picker-datetime-panel-active .univer-date-picker-time-panel-active {
    opacity: 1
}

.univer-date-picker-input {
    position: relative;
    display: inline-flex;
    width: 100%
}

.univer-date-picker-rtl .univer-date-picker-input {
    text-align: right
}

.univer-date-picker-input-active>input {
    background: #0000ff0d
}

.univer-date-picker-input>input {
    width: 100%;
    padding-left: 12px;
    border: none;
    border-radius: var(--border-radius-base);
    box-sizing: border-box
}

.univer-date-picker-input>input::-moz-placeholder {
    opacity: 1
}

.univer-date-picker-input>input::placeholder {
    color: #bfbfbf
}

.univer-date-picker-input>input:placeholder-shown {
    text-overflow: ellipsis
}

.univer-date-picker-input>input:focus {
    outline: none
}

.univer-date-picker-input-placeholder>input {
    color: #bfbfbf
}

.univer-date-picker-clear {
    position: absolute;
    top: 7px;
    right: 8px;
    cursor: pointer
}

.univer-date-picker-rtl .univer-date-picker-clear {
    right: auto;
    left: 4px
}

.univer-date-picker-clear-btn {
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    background-color: rgb(var(--grey-500));
    border-radius: 50%;
    display: block
}

.univer-date-picker-clear-btn:before {
    content: "×";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: 16px;
    line-height: 16px
}

.univer-date-picker-dropdown {
    position: absolute;
    pointer-events: none
}

.univer-date-picker-dropdown-range {
    padding: 10px 0
}

.univer-date-picker-dropdown-hidden {
    display: none
}

.univer-date-picker-dropdown-placement-topLeft .univer-date-picker-range-arrow,.univer-date-picker-dropdown-placement-topRight .univer-date-picker-range-arrow {
    bottom: 6px;
    transform: rotate(135deg)
}

.univer-date-picker-dropdown-placement-bottomLeft .univer-date-picker-range-arrow,.univer-date-picker-dropdown-placement-bottomright .univer-date-picker-range-arrow {
    top: 6px;
    transform: rotate(-45deg)
}

.univer-date-picker-dropdown .univer-date-picker-range-arrow {
    position: absolute;
    left: 10px;
    z-index: 1;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    transition: all .3s
}

.univer-date-picker-dropdown-rtl.univer-date-picker-dropdown .univer-date-picker-range-arrow {
    right: 10px;
    left: auto;
    margin-right: 10px;
    margin-left: 0
}

.univer-date-picker-dropdown .univer-date-picker-range-arrow:before,.univer-date-picker-dropdown .univer-date-picker-range-arrow:after {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    transform: translate(-50%,-50%);
    content: ""
}

.univer-date-picker-dropdown-rtl.univer-date-picker-dropdown .univer-date-picker-range-arrow:before,.univer-date-picker-dropdown-rtl.univer-date-picker-dropdown .univer-date-picker-range-arrow:after {
    right: 50%;
    left: auto;
    transform: translate(50%,-50%)
}

.univer-date-picker-dropdown .univer-date-picker-range-arrow:before {
    width: 10px;
    height: 10px;
    border: 5px solid blue;
    border-color: blue blue transparent transparent
}

.univer-date-picker-dropdown .univer-date-picker-range-arrow:after {
    width: 8px;
    height: 8px;
    border: 8px / 2 solid blue;
    border-color: rgb(var(--bg-color-secondary)) rgb(var(--bg-color-secondary)) transparent transparent
}

.univer-date-picker-range {
    position: relative;
    display: inline-flex
}

.univer-date-picker-range-wrapper {
    display: flex
}

.univer-date-picker-range .univer-date-picker-active-bar {
    bottom: 0;
    height: 3px;
    background: green;
    opacity: 0;
    transition: all .3s;
    pointer-events: none
}

.univer-date-picker-range.univer-date-picker-focused .univer-date-picker-active-bar {
    opacity: 1
}

.univer-date-picker-panel-container {
    display: inline-block;
    vertical-align: top;
    transition: margin .3s;
    pointer-events: all
}

.univer-date-picker-panel-layout {
    padding: var(--padding-lg);
    background: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-base);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow: hidden
}

.univer-date-picker-selector {
    width: 100%
}

.univer-date-picker-selection-overflow {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid green
}

.univer-date-picker-selection-overflow-item {
    flex: none;
    max-width: 100%
}

.univer-date-picker-selection-item {
    border: 1px solid blue
}

.univer-date-picker-multiple-input {
    width: 10px;
    opacity: .1
}

.univer-dropdown {
    position: absolute;
    z-index: 1070;
    top: -9999px;
    left: -9999px;
    display: block
}

.univer-dropdown-hidden {
    display: none
}

.univer-dropdown-slide-up-enter,.univer-dropdown-slide-up-appear {
    transform-origin: 0 0;
    display: block!important;
    animation-duration: .15s;
    animation-fill-mode: both;
    opacity: 0;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(.08,.82,.17,1)
}

.univer-dropdown-slide-up-leave {
    transform-origin: 0 0;
    display: block!important;
    animation-duration: .15s;
    animation-fill-mode: both;
    opacity: 1;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(.6,.04,.98,.34)
}

.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-bottomLeft,.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-bottomLeft,.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-bottomCenter,.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-bottomCenter,.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-bottomRight,.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-bottomRight {
    animation-name: univer-dropdown-slide-up-in;
    animation-play-state: running
}

.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-topLeft,.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-topLeft,.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-topCenter,.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-topCenter,.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-topRight,.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-topRight {
    animation-name: univer-dropdown-slide-down-in;
    animation-play-state: running
}

.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-bottomLeft,.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-bottomCenter,.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-bottomRight {
    animation-name: univer-dropdown-slide-up-out;
    animation-play-state: running
}

.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-topLeft,.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-topCenter,.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-topRight {
    animation-name: univer-dropdown-slide-down-out;
    animation-play-state: running
}

@keyframes univer-dropdown-slide-up-in {
    0% {
        transform-origin: 0% 0%;
        transform: scaleY(0);
        opacity: 0
    }

    to {
        transform-origin: 0% 0%;
        transform: scaleY(1);
        opacity: 1
    }
}

@keyframes univer-dropdown-slide-up-out {
    0% {
        transform-origin: 0% 0%;
        transform: scaleY(1);
        opacity: 1
    }

    to {
        transform-origin: 0% 0%;
        transform: scaleY(0);
        opacity: 0
    }
}

@keyframes univer-dropdown-slide-down-in {
    0% {
        transform-origin: 0% 100%;
        transform: scaleY(0);
        opacity: 0
    }

    to {
        transform-origin: 0% 100%;
        transform: scaleY(1);
        opacity: 1
    }
}

@keyframes univer-dropdown-slide-down-out {
    0% {
        transform-origin: 0% 100%;
        transform: scaleY(1);
        opacity: 1
    }

    to {
        transform-origin: 0% 100%;
        transform: scaleY(0);
        opacity: 0
    }
}

.univer-form-layout {
    display: flex;
    flex-direction: column
}

.univer-form-layout-label {
    font-size: var(--font-size-sm);
    min-height: var(--font-size-sm);
    color: rgba(var(--color-black))
}

.univer-form-layout-desc {
    margin-top: var(--margin-xxs);
    font-size: var(--font-size-xs);
    color: rgba(var(--grey-500))
}

.univer-form-layout-content {
    margin-top: var(--margin-xs);
    margin-bottom: var(--margin-sm)
}

.univer-form-layout-content .univer-input-affix-wrapper,.univer-form-layout-content .univer-select {
    width: 100%
}

.univer-form-layout-content .univer-range-selector {
    width: 100%!important
}

.univer-form-layout-content-error .univer-input-affix-wrapper {
    border: 1px solid rgba(var(--red-400))
}

.univer-form-layout-content-error .univer-select-single:not(.univer-select-customize-input) .univer-select-selector {
    border: 1px solid rgba(var(--red-400))
}

.univer-form-layout-error {
    color: rgba(var(--red-400));
    font-size: var(--font-size-sm)
}

.univer-form-dual-column-layout {
    display: flex;
    justify-content: space-between
}

.univer-form-dual-column-layout .univer-form-layout {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: calc(50% - 8px)
}

.univer-input {
    box-sizing: border-box;
    width: 100%;
    color: rgb(var(--text-color))
}

.univer-input::selection {
    color: rgb(var(--color-white));
    background-color: rgb(var(--primary-color))
}

.univer-input-affix-wrapper {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base);
    transition: all .15s
}

.univer-input-affix-wrapper-small {
    height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    font-size: var(--font-size-sm)
}

.univer-input-affix-wrapper-middle {
    height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    font-size: var(--font-size-sm)
}

.univer-input-affix-wrapper-large {
    height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    font-size: var(--font-size-sm)
}

.univer-input-affix-wrapper:hover,.univer-input-affix-wrapper:focus-within {
    border-color: rgb(var(--primary-color))
}

.univer-input-affix-wrapper-disabled {
    cursor: not-allowed;
    border-color: rgb(var(--border-color))
}

.univer-input-affix-wrapper-disabled:hover {
    border-color: rgb(var(--border-color))
}

.univer-input-affix-wrapper input {
    padding: 0;
    border: none;
    outline: none;
    background-color: rgb(var(--bg-color-secondary))
}

.univer-input-affix-wrapper input[disabled] {
    cursor: inherit;
    color: rgb(var(--grey-200));
    background-color: rgb(var(--bg-color-secondary))
}

.univer-input-suffix {
    position: absolute;
    top: 0;
    right: 2px;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--padding-sm);
    background-color: rgb(var(--bg-color-secondary))
}

.univer-input-clear-icon {
    cursor: pointer;
    display: inline-flex;
    align-items: center
}

.univer-input-clear-icon-hidden {
    display: none
}

.univer-input-slot-container {
    position: relative;
    display: flex
}

.univer-input-slot-container>span {
    width: 100%
}

.univer-input-slot {
    position: absolute;
    top: 0;
    right: 8px;
    display: inline-flex;
    height: 100%
}

.univer-input-number {
    display: inline-block;
    max-height: 100%;
    height: 34px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    vertical-align: middle;
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base);
    transition: all .3s
}

.univer-input-number-focused,.univer-input-number:hover,.univer-input-number-focused .univer-input-number-handler-up,.univer-input-number:hover .univer-input-number-handler-up,.univer-input-number-focused .univer-input-number-handler-wrap,.univer-input-number:hover .univer-input-number-handler-wrap {
    border-color: rgb(var(--primary-color))
}

.univer-input-number-handler {
    touch-action: none;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.univer-input-number-handler-up-inner,.univer-input-number-handler-down-inner {
    user-select: none;
    color: rgb(var(--text-color))
}

.univer-input-number-disabled:hover {
    cursor: not-allowed;
    border-color: rgb(var(--border-color))
}

.univer-input-number-disabled:hover .univer-input-number-handler-up,.univer-input-number-disabled:hover .univer-input-number-handler-wrap {
    border-color: rgb(var(--border-color))
}

.univer-input-number-input-wrap {
    overflow: hidden;
    height: 100%
}

.univer-input-number-input {
    width: 100%;
    height: 100%;
    padding: 0;
    line-height: 34px;
    color: rgb(var(--text-color));
    text-align: center;
    border: 0;
    border-radius: var(--border-radius-base);
    outline: 0;
    transition: all .15s
}

.univer-input-number-handler-wrap {
    float: right;
    display: flex;
    flex-direction: column;
    width: 20px;
    height: 100%;
    border-left: 1px solid rgb(var(--border-color));
    transition: all .3s
}

.univer-input-number-handler-up {
    border-bottom: 1px solid rgb(var(--border-color));
    transition: all .15s
}

.univer-input-number-handler-up-inner:after {
    content: "+"
}

.univer-input-number-handler-down {
    transition: all .15s
}

.univer-input-number-handler-down-inner:after {
    content: "-"
}

.univer-input-number-handler-down-disabled,.univer-input-number-handler-up-disabled {
    opacity: .3
}

.univer-input-number-handler-down-disabled:hover,.univer-input-number-handler-up-disabled:hover {
    color: #999;
    border-color: rgb(var(--grey-200))
}

.univer-input-number-disabled .univer-input-number-input {
    cursor: not-allowed
}

.univer-input-number-disabled .univer-input-number-handler {
    opacity: .3
}

.univer-input-number-disabled .univer-input-number-handler:hover {
    color: #999;
    border-color: rgb(var(--grey-200))
}

.univer-menu {
    box-sizing: border-box;
    margin: 0;
    padding: var(--padding-base);
    font-size: var(--font-size-xs);
    list-style: none;
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    outline: none;
    box-shadow: var(--box-shadow-base)
}

.univer-menu-vertical {
    display: grid;
    gap: var(--margin-xs)
}

.univer-menu-hidden,.univer-menu-submenu-hidden {
    display: none
}

.univer-menu-item-group:not(:last-child) {
    padding-bottom: var(--padding-sm);
    border-bottom: 1px solid rgb(var(--border-color))
}

.univer-menu-item-group-list {
    display: grid;
    gap: var(--margin-xxs);
    margin: 0;
    padding: 0
}

.univer-menu-item-group-title {
    color: rgb(var(--text-color))
}

.univer-menu-item-active,.univer-menu-submenu-active {
    background-color: rgb(var(--bg-color-hover))
}

.univer-menu-item-selected {
    transform: translateZ(0);
    background-color: rgb(var(--bg-color-hover))
}

.univer-menu-submenu-selected {
    background-color: rgb(var(--bg-color-hover))
}

.univer-menu>li.univer-menu-submenu {
    padding: 0
}

.univer-menu-horizontal.univer-menu-sub,.univer-menu-vertical.univer-menu-sub,.univer-menu-vertical-left.univer-menu-sub,.univer-menu-vertical-right.univer-menu-sub {
    min-width: 160px;
    margin-top: 0
}

.univer-menu-item {
    display: flex;
    gap: var(--margin-xs);
    align-items: center
}

.univer-menu-item,.univer-menu-submenu {
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    min-height: 28px;
    margin: 0;
    padding: var(--padding-xs);
    white-space: nowrap;
    list-style: none;
    border-radius: var(--border-radius-base)
}

.univer-menu-item.univer-menu-item-disabled,.univer-menu-submenu.univer-menu-item-disabled,.univer-menu-item.univer-menu-submenu-disabled,.univer-menu-submenu.univer-menu-submenu-disabled {
    color: rgb(var(--grey-200))!important;
    cursor: not-allowed
}

.univer-menu-submenu-popup {
    position: absolute;
    z-index: 1070
}

.univer-menu-submenu-popup .univer-submenu-title-wrapper {
    padding-right: 20px
}

.univer-menu-submenu-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%
}

.univer-menu .univer-menu-submenu-title-more-icon,.univer-menu .univer-menu-item-more-icon {
    margin-left: var(--margin-xs);
    font-size: var(--font-size-sm);
    color: rgb(var(--text-color))
}

.univer-menu-horizontal {
    overflow: hidden;
    white-space: nowrap;
    border: none;
    border-bottom: 1px solid rgb(var(--border-color));
    box-shadow: none
}

.univer-menu-horizontal>.univer-menu-item,.univer-menu-horizontal>.univer-menu-submenu>.univer-menu-submenu-title {
    padding: 15px 20px
}

.univer-menu-horizontal>.univer-menu-submenu,.univer-menu-horizontal>.univer-menu-item {
    display: inline-block;
    vertical-align: bottom;
    border-bottom: 2px solid transparent
}

.univer-menu-vertical>.univer-menu-item,.univer-menu-vertical-left>.univer-menu-item,.univer-menu-vertical-right>.univer-menu-item,.univer-menu-inline>.univer-menu-item,.univer-menu-vertical>.univer-menu-submenu>.univer-menu-submenu-title,.univer-menu-vertical-left>.univer-menu-submenu>.univer-menu-submenu-title,.univer-menu-vertical-right>.univer-menu-submenu>.univer-menu-submenu-title,.univer-menu-inline>.univer-menu-submenu>.univer-menu-submenu-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    min-height: 28px;
    padding: var(--padding-xs)
}

.univer-menu-vertical .univer-menu-submenu-arrow,.univer-menu-vertical-left .univer-menu-submenu-arrow,.univer-menu-vertical-right .univer-menu-submenu-arrow,.univer-menu-inline .univer-menu-submenu-arrow {
    position: absolute;
    right: 16px;
    display: inline-block;
    font-size: inherit;
    line-height: 1.5em;
    text-align: center;
    text-transform: none;
    text-rendering: auto;
    vertical-align: baseline
}

.univer-menu-sub.univer-menu-inline {
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none
}

.univer-menu-sub.univer-menu-inline>.univer-menu-item,.univer-menu-sub.univer-menu-inline>.univer-menu-submenu>.univer-menu-submenu-title {
    padding-top: 8px;
    padding-right: 0;
    padding-bottom: 8px
}

.univer-menu-open-slide-up-enter,.univer-menu-open-slide-up-appear {
    transform-origin: 0 0;
    animation-duration: .3s;
    animation-fill-mode: both;
    opacity: 0;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(.08,.82,.17,1)
}

.univer-menu-open-slide-up-leave {
    transform-origin: 0 0;
    animation-duration: .3s;
    animation-fill-mode: both;
    opacity: 1;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(.6,.04,.98,.34)
}

.univer-menu-open-slide-up-enter.univer-menu-open-slide-up-enter-active,.univer-menu-open-slide-up-appear.univer-menu-open-slide-up-appear-active {
    animation-name: univer-menu-open-slide-up-in;
    animation-play-state: running
}

.univer-menu-open-slide-up-leave.univer-menu-open-slide-up-leave-active {
    animation-name: univer-menu-open-slide-up-out;
    animation-play-state: running
}

@keyframes univer-menu-open-slide-up-in {
    0% {
        transform-origin: 0% 0%;
        transform: scaleY(0);
        opacity: 0
    }

    to {
        transform-origin: 0% 0%;
        transform: scaleY(1);
        opacity: 1
    }
}

@keyframes univer-menu-open-slide-up-out {
    0% {
        transform-origin: 0% 0%;
        transform: scaleY(1);
        opacity: 1
    }

    to {
        transform-origin: 0% 0%;
        transform: scaleY(0);
        opacity: 0
    }
}

.univer-menu-open-zoom-enter,.univer-menu-open-zoom-appear {
    opacity: 0;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(.08,.82,.17,1);
    transform-origin: 0 0;
    animation-duration: .3s;
    animation-fill-mode: both
}

.univer-menu-open-zoom-leave {
    transform-origin: 0 0;
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(.6,.04,.98,.34)
}

.univer-menu-open-zoom-enter.univer-menu-open-zoom-enter-active,.univer-menu-open-zoom-appear.univer-menu-open-zoom-appear-active {
    animation-name: univer-menu-open-zoom-in;
    animation-play-state: running
}

.univer-menu-open-zoom-leave.univer-menu-open-zoom-leave-active {
    animation-name: univer-menu-open-zoom-out;
    animation-play-state: running
}

@keyframes univer-menu-open-zoom-in {
    0% {
        transform: scale(0);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes univer-menu-open-zoom-out {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(0);
        opacity: 0
    }
}

.univer-message {
    position: fixed;
    z-index: 1000;
    top: var(--margin-sm);
    left: 50%;
    transform: translate(-50%);
    display: grid;
    gap: var(--margin-sm)
}

.univer-message-item {
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: all .2s cubic-bezier(.1,.7,1,.1)
}

.univer-message-item.univer-enter-active {
    transform: translateY(-20px);
    opacity: 0
}

.univer-message-item.univer-enter-done {
    transform: translateY(0);
    opacity: 1
}

.univer-message-item.univer-exit {
    transform: translateY(-20px);
    margin-bottom: -40px;
    opacity: 0
}

.univer-message-item.univer-exit-active {
    transform: translateY(-20px);
    opacity: 0
}

.univer-message-icon {
    display: inline-flex;
    align-items: center
}

.univer-message-icon-success {
    color: rgb(var(--success-color))
}

.univer-message-icon-info {
    color: rgb(var(--info-color))
}

.univer-message-icon-warning {
    color: rgb(var(--warning-color))
}

.univer-message-icon-error {
    color: rgb(var(--error-color))
}

.univer-message-content {
    display: inline-flex;
    gap: var(--margin-xs);
    align-items: center;
    padding: var(--padding-base);
    font-size: var(--font-size-base);
    background-color: rgb(var(--color-white));
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-lg)
}

.univer-pager {
    display: flex;
    align-items: center;
    box-sizing: border-box
}

.univer-pager-left-arrow,.univer-pager-right-arrow {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 8px;
    color: rgb(var(--grey-400));
    border-radius: 4px
}

.univer-pager-left-arrow:hover,.univer-pager-right-arrow:hover {
    background-color: rgb(var(--grey-50))
}

.univer-pager-number {
    margin: 0 4px;
    font-size: 13px;
    color: rgb(var(--text-color))
}

.univer-popup-absolute {
    position: absolute;
    z-index: 100;
    top: -9999px;
    left: -9999px
}

.univer-popup {
    position: fixed;
    z-index: 1070;
    top: -9999px;
    left: -9999px;
    background-color: rgb(var(--bg-color-secondary));
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--box-shadow-base)
}

.univer-popup-enter {
    transform-origin: 0 0;
    animation-duration: .15s;
    animation-fill-mode: both;
    opacity: 0;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(.08,.82,.17,1)
}

.univer-popup-enter-active {
    animation-name: univer-popup-slide-up-in;
    animation-play-state: running
}

.univer-popup-exit {
    transform-origin: 0 0;
    animation-duration: .15s;
    animation-fill-mode: both;
    opacity: 1;
    animation-name: univer-popup-slide-up-out;
    animation-play-state: running;
    animation-timing-function: cubic-bezier(.6,.04,.98,.34)
}

.univer-popup-exit-active {
    display: none
}

@keyframes univer-popup-slide-up-in {
    0% {
        transform-origin: 0 0;
        transform: scaleY(0);
        opacity: 0
    }

    to {
        transform-origin: 0 0;
        transform: scaleY(1);
        opacity: 1
    }
}

@keyframes univer-popup-slide-up-out {
    0% {
        transform-origin: 0 0;
        transform: scaleY(1);
        opacity: 1
    }

    to {
        transform-origin: 0 0;
        transform: scaleY(0);
        opacity: 0
    }
}

.univer-popup-mask {
    position: fixed;
    z-index: 1060;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.univer-radio {
    cursor: pointer;
    display: inline-flex;
    gap: var(--margin-xs);
    align-items: center;
    box-sizing: border-box;
    font-size: var(--font-size-sm);
    color: var(--text-color)
}

.univer-radio:hover .univer-radio-target-input:checked+.univer-radio-target-inner:after {
    background-color: rgb(var(--primary-color-hover))
}

.univer-radio:hover .univer-radio-target-inner {
    border-color: rgb(var(--primary-color-hover))
}

.univer-radio-disabled {
    cursor: not-allowed;
    color: rgb(var(--grey-300))
}

.univer-radio-disabled .univer-radio-target-input:checked+.univer-radio-target-inner:after {
    background-color: rgb(var(--grey-300))
}

.univer-radio-disabled .univer-radio-target-inner {
    border-color: rgb(var(--grey-300))
}

.univer-radio-disabled:hover .univer-radio-target-input:checked+.univer-radio-target-inner:after {
    background-color: rgb(var(--grey-300))
}

.univer-radio-disabled:hover .univer-radio-target-inner {
    border-color: rgb(var(--grey-300))
}

.univer-radio-target {
    position: relative
}

.univer-radio-target-input {
    position: absolute;
    opacity: 0
}

.univer-radio-target-input:checked+.univer-radio-target-inner:after {
    transform: scale(1);
    box-sizing: border-box;
    opacity: 1;
    background-color: rgb(var(--primary-color))
}

.univer-radio-target-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 1px solid rgb(var(--primary-color));
    border-radius: 50%;
    transition: all .15s
}

.univer-radio-target-inner:after {
    content: "";
    transform-origin: center center;
    transform: scale(0);
    display: block;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    opacity: 0;
    background-color: rgb(var(--bg-color-secondary));
    border-radius: 50%;
    transition: all .15s
}

.univer-radio-group {
    display: flex;
    gap: var(--margin-sm)
}

.univer-radio-group-direction-vertical {
    flex-direction: column
}

.univer-scrollbar-container {
    position: relative;
    overflow: hidden;
    height: 100%
}

.univer-scrollbar-bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%
}

.univer-scrollbar-bar:hover .univer-scrollbar-bar-thumb:not(:active) {
    background-color: rgb(var(--scrollbar-color-hover))
}

.univer-scrollbar-bar-thumb {
    position: absolute;
    width: calc(100% - 2px);
    background-color: rgb(var(--scrollbar-color));
    border-radius: var(--border-radius-lg)
}

.univer-scrollbar-bar-thumb:active {
    background-color: rgb(var(--scrollbar-color-active))
}

.univer-scrollbar-content {
    scrollbar-width: none;
    overflow: auto;
    box-sizing: border-box;
    height: 100%;
    padding-right: 8px
}

.univer-scrollbar-content::-webkit-scrollbar {
    display: none
}

.univer-select {
    position: relative;
    display: inline-block
}

.univer-select-disabled,.univer-select-disabled input {
    cursor: not-allowed
}

.univer-select-disabled .univer-select-selector {
    opacity: .3
}

.univer-select-show-arrow.univer-select-loading .univer-select-arrow-icon:after {
    transform: none;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border: 2px solid #999;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 100%;
    animation: univer-select-loading-icon .5s infinite
}

.univer-select .univer-select-selection-placeholder {
    pointer-events: none;
    opacity: .4
}

.univer-select .univer-select-selection-search-input {
    font-size: var(--font-size-sm);
    color: rgb(var(--text-color));
    -webkit-appearance: none;
    appearance: none
}

.univer-select .univer-select-selection-search-input::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
    appearance: none
}

.univer-select-single .univer-select-selector {
    position: relative;
    display: flex;
    box-sizing: border-box;
    height: 28px;
    padding: 0 10px;
    transition: all .15s
}

.univer-select-single .univer-select-selector .univer-select-selection-search {
    width: 100%;
    line-height: 0
}

.univer-select-single .univer-select-selector .univer-select-selection-search-input {
    width: 100%;
    height: 100%
}

.univer-select-single .univer-select-selector .univer-select-selection-item,.univer-select-single .univer-select-selector .univer-select-selection-placeholder {
    pointer-events: none;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 0 18px 0 10px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-sm);
    line-height: 28px;
    display: inline-block;
    align-items: center
}

.univer-select-single:not(.univer-select-customize-input) .univer-select-selector {
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base)
}

.univer-select-single:not(.univer-select-customize-input) .univer-select-selector .univer-select-selection-search-input {
    width: 100%;
    padding: 0;
    border: none;
    outline: none
}

.univer-select-multiple .univer-select-selector {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base)
}

.univer-select-multiple .univer-select-selector .univer-select-selection-item {
    flex: none;
    margin-right: 2px;
    padding: 0 8px;
    background: #bbb;
    border-radius: 4px
}

.univer-select-multiple .univer-select-selector .univer-select-selection-item-disabled {
    cursor: not-allowed;
    opacity: .5
}

.univer-select-multiple .univer-select-selector .univer-select-selection-overflow {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.univer-select-multiple .univer-select-selector .univer-select-selection-overflow-item {
    flex: none;
    max-width: 100%
}

.univer-select-multiple .univer-select-selector .univer-select-selection-search {
    position: relative;
    max-width: 100%
}

.univer-select-multiple .univer-select-selector .univer-select-selection-search-input,.univer-select-multiple .univer-select-selector .univer-select-selection-search-mirror {
    box-sizing: border-box;
    padding: var(--padding-xs) var(--padding-sm)
}

.univer-select-multiple .univer-select-selector .univer-select-selection-search-mirror {
    position: none;
    z-index: 999;
    top: 0;
    left: 0;
    white-space: nowrap;
    visibility: hidden
}

.univer-select-multiple .univer-select-selector .univer-select-selection-search-input {
    width: 100%;
    padding: 0;
    border: none;
    outline: none
}

.univer-select-borderless:not(.univer-select-customize-input) .univer-select-selector {
    border-color: transparent
}

.univer-select-borderless.univer-select-focused .univer-select-selector,.univer-select-borderless.univer-select:hover .univer-select-selector {
    border-color: transparent!important
}

.univer-select-allow-clear.univer-select-multiple .univer-select-selector {
    padding-right: 20px
}

.univer-select-allow-clear .univer-select-clear {
    position: absolute;
    top: 0;
    right: 20px
}

.univer-select-show-arrow.univer-select-multiple .univer-select-selector {
    padding-right: 20px
}

.univer-select-show-arrow .univer-select-arrow {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: var(--margin-sm);
    display: flex;
    align-items: center;
    height: 100%;
    font-size: var(--font-size-xxs);
    color: rgb(var(--text-color-secondary))
}

.univer-select-show-arrow .univer-select-arrow-icon:after {
    content: "";
    transform: translateY(5px);
    display: inline-block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #999
}

.univer-select-focused .univer-select-selector,.univer-select:hover .univer-select-selector {
    border-color: rgb(var(--primary-color))!important
}

.univer-select-dropdown {
    position: absolute;
    z-index: 1070;
    background: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base)
}

.univer-select-dropdown-hidden {
    display: none
}

.univer-select-item {
    cursor: pointer;
    padding: var(--padding-sm) var(--padding-base);
    font-size: var(--font-size-sm)
}

.univer-select-item-group {
    padding: 0
}

.univer-select-item-group:not(:first-child) {
    border-top: 1px solid rgb(var(--border-color))
}

.univer-select-item-option {
    position: relative;
    transition: all .15s
}

.univer-select-item-option .univer-select-item-option-state {
    pointer-events: none;
    position: absolute;
    top: 4px;
    right: 0
}

.univer-select-item-option-active {
    background: #ddd
}

.univer-select-item-option-disabled {
    color: #999
}

.univer-select-item-empty {
    color: #999;
    text-align: center
}

.univer-select-selection__choice-zoom {
    transition: all .3s
}

.univer-select-selection__choice-zoom-appear {
    transform: scale(.5);
    opacity: 0
}

.univer-select-selection__choice-zoom-appear.univer-select-selection__choice-zoom-appear-active,.univer-select-selection__choice-zoom-leave {
    transform: scale(1);
    opacity: 1
}

.univer-select-selection__choice-zoom-leave.univer-select-selection__choice-zoom-leave-active {
    transform: scale(.5);
    opacity: 0
}

.univer-select-dropdown-slide-up-enter,.univer-select-dropdown-slide-up-appear {
    transform-origin: 0 0;
    animation-duration: .3s;
    animation-fill-mode: both;
    opacity: 0;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(.08,.82,.17,1)
}

.univer-select-dropdown-slide-up-leave {
    transform-origin: 0 0;
    animation-duration: .3s;
    animation-fill-mode: both;
    opacity: 1;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(.6,.04,.98,.34)
}

.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-bottomLeft,.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-bottomLeft,.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-bottomRight,.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-bottomRight {
    animation-name: univer-select-dropdown-slide-up-in;
    animation-play-state: running
}

.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-bottomLeft,.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-bottomRight {
    animation-name: univer-select-dropdown-slide-up-out;
    animation-play-state: running
}

.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-topLeft,.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-topLeft,.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-topRight,.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-topRight {
    animation-name: univer-select-dropdown-slide-down-in;
    animation-play-state: running
}

.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-topLeft,.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-topRight {
    animation-name: univer-select-dropdown-slide-down-out;
    animation-play-state: running
}

@keyframes univer-select-dropdown-slide-up-in {
    0% {
        transform-origin: 0% 0%;
        transform: scaleY(0);
        opacity: 0
    }

    to {
        transform-origin: 0% 0%;
        transform: scaleY(1);
        opacity: 1
    }
}

@keyframes univer-select-dropdown-slide-up-out {
    0% {
        transform-origin: 0% 0%;
        transform: scaleY(1);
        opacity: 1
    }

    to {
        transform-origin: 0% 0%;
        transform: scaleY(0);
        opacity: 0
    }
}

@keyframes univer-select-dropdown-slide-down-in {
    0% {
        transform-origin: 100% 100%;
        transform: scaleY(0);
        opacity: 0
    }

    to {
        transform-origin: 100% 100%;
        transform: scaleY(1);
        opacity: 1
    }
}

@keyframes univer-select-dropdown-slide-down-out {
    0% {
        transform-origin: 100% 100%;
        transform: scaleY(1);
        opacity: 1
    }

    to {
        transform-origin: 100% 100%;
        transform: scaleY(0);
        opacity: 0
    }
}

@keyframes univer-select-loading-icon {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.univer-select-list {
    overflow-y: auto;
    display: grid;
    gap: var(--margin-xs);
    max-height: 348px;
    margin: 0;
    padding: var(--padding-lg) var(--padding-base);
    list-style: none;
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base)
}

.univer-select-list-item {
    font-size: var(--font-size-sm)
}

.univer-select-list-item>a {
    cursor: pointer;
    position: relative;
    display: block;
    padding: var(--padding-xs) 28px;
    border-radius: var(--border-radius-base);
    transition: all .15s
}

.univer-select-list-item>a:hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-select-list-item-icon {
    position: absolute;
    top: 50%;
    left: var(--margin-xxs);
    transform: translateY(-50%);
    display: inline-flex;
    font-size: var(--font-size-lg);
    color: rgb(var(--success-color))
}

.univer-select-list-item-select>a {
    background-color: rgb(var(--bg-color))
}

.univer-segmented {
    display: inline-flex;
    padding: 2px;
    height: 32px;
    width: 100%;
    border-radius: 6px;
    background-color: rgb(var(--grey-50));
    box-sizing: border-box
}

.univer-segmented-group {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-items: flex-start;
    width: 100%;
    border-radius: 2px
}

.univer-segmented-item {
    position: relative;
    padding: 4px 10px;
    border-radius: 4px;
    height: 100%;
    flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    box-sizing: border-box;
    color: rgba(var(--color-black));
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-size: 13px
}

.univer-segmented-item-selected {
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(var(--color-black),.08);
    color: rgba(var(--color-black))
}

.univer-segmented-item:hover,.univer-segmented-item:focus {
    color: rgba(var(--color-black))
}

.univer-segmented-item-disabled,.univer-segmented-item-disabled:hover,.univer-segmented-item-disabled:focus {
    color: #00000040;
    cursor: not-allowed
}

.univer-segmented-item-label {
    z-index: 2;
    line-height: 20px
}

.univer-segmented-item-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none
}

.univer-segmented-disabled .univer-segmented-item,.univer-segmented-disabled .univer-segmented-item:hover,.univer-segmented-disabled .univer-segmented-item:focus,.univer-segmented-disabled .univer-segmented-item:hover:hover,.univer-segmented-disabled .univer-segmented-item:focus:hover,.univer-segmented-disabled .univer-segmented-item:hover:focus,.univer-segmented-disabled .univer-segmented-item:focus:focus {
    color: #00000040;
    cursor: not-allowed
}

.univer-segmented-thumb {
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(var(--color-black),.08);
    position: absolute;
    box-sizing: border-box;
    width: 0;
    height: 100%;
    border-radius: 4px;
    padding: 4px 0
}

.univer-segmented-thumb-motion-appear-active,.univer-segmented-thumb-motion-enter-active {
    transition: transform .3s cubic-bezier(.645,.045,.355,1),width .3s cubic-bezier(.645,.045,.355,1);
    will-change: transform,width
}

.univer-segmented-rtl {
    direction: rtl
}

.univer-tooltip {
    position: absolute;
    z-index: 1080;
    pointer-events: none;
    display: block;
    font-size: var(--font-size-xxs);
    visibility: visible
}

.univer-tooltip-no-events {
    pointer-events: none
}

.univer-tooltip-hidden {
    display: none
}

.univer-tooltip-placement-top {
    padding: 4px 0
}

.univer-tooltip-placement-right {
    padding: 0 4px
}

.univer-tooltip-placement-bottom {
    padding: 4px
}

.univer-tooltip-placement-left {
    padding: 0 4px
}

.univer-tooltip-placement-top .univer-tooltip-arrow,.univer-tooltip-placement-topLeft .univer-tooltip-arrow,.univer-tooltip-placement-topRight .univer-tooltip-arrow {
    bottom: 0;
    margin-left: -4px;
    border-width: 4px 4px 0;
    border-top-color: rgb(var(--color-black))
}

.univer-tooltip-placement-top .univer-tooltip-arrow {
    left: 50%
}

.univer-tooltip-placement-right .univer-tooltip-arrow {
    left: 0;
    margin-top: -4px;
    border-width: 4px 4px 4px 0;
    border-right-color: rgb(var(--color-black))
}

.univer-tooltip-placement-right .univer-tooltip-arrow {
    top: 50%
}

.univer-tooltip-placement-left .univer-tooltip-arrow {
    right: 0;
    margin-top: -4px;
    border-width: 4px 0 4px 4px;
    border-left-color: rgb(var(--color-black))
}

.univer-tooltip-placement-left .univer-tooltip-arrow {
    top: 50%
}

.univer-tooltip-placement-bottom .univer-tooltip-arrow {
    top: 0;
    margin-left: -4px;
    border-width: 0 4px 4px;
    border-bottom-color: rgb(var(--color-black))
}

.univer-tooltip-placement-bottom .univer-tooltip-arrow {
    left: 50%
}

.univer-tooltip-inner {
    padding: var(--padding-xs) var(--padding-lg);
    color: rgb(var(--color-white));
    text-align: left;
    text-decoration: none;
    background-color: rgb(var(--color-black));
    border-radius: var(--border-radius-base)
}

.univer-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.univer-slider {
    user-select: none;
    display: flex;
    gap: var(--margin-xxs);
    align-items: center
}

.univer-slider-disabled {
    cursor: not-allowed
}

.univer-slider-disabled .univer-slider-rail {
    background-color: rgb(var(--grey-300))
}

.univer-slider-disabled .univer-slider-handle {
    background-color: rgb(var(--grey-300));
    box-shadow: none
}

.univer-slider-disabled .univer-slider-handle:hover {
    cursor: not-allowed;
    background-color: rgb(var(--grey-300))
}

.univer-slider-disabled .univer-slider-reset-point {
    cursor: not-allowed
}

.univer-slider-disabled .univer-slider-value:hover {
    cursor: not-allowed;
    background-color: rgb(var(--grey-300))
}

.univer-slider-disabled .univer-slider-value {
    pointer-events: none;
    color: rgb(var(--grey-300))
}

.univer-slider-disabled .univer-slider-value:hover {
    background-color: transparent
}

.univer-slider-rail {
    position: relative;
    width: 116px;
    height: 2px;
    padding: 0 6px;
    background-color: rgb(var(--text-color-secondary));
    border-radius: 15px
}

.univer-slider-inner-rail {
    position: relative;
    height: 2px
}

.univer-slider-handle {
    cursor: pointer;
    position: absolute;
    top: calc(50% - 6px);
    transform: translate(-50%);
    width: 12px;
    height: 12px;
    background-color: rgb(var(--color-white));
    border-radius: 50%;
    box-shadow: 0 0 6px #0000001a;
    transition: background .2s
}

.univer-slider-handle:hover {
    background-color: rgb(var(--border-color));
    box-shadow: none
}

.univer-slider-reset-point {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    width: 4px;
    height: 2px;
    background-color: rgb(var(--color-white));
    border-radius: 50%
}

.univer-slider-value {
    cursor: pointer;
    width: 55px;
    height: 28px;
    font-size: var(--font-size-xs);
    line-height: 2;
    color: rgb(var(--text-color-secondary-darker));
    text-align: center;
    border-radius: var(--border-radius-base);
    transition: all .2s;
    text-decoration: none
}

.univer-slider-value:hover {
    background-color: rgb(var(--border-color));
    text-decoration: inherit;
    color: inherit
}

.univer-slider-value.univer-dropdown-open {
    background-color: rgb(var(--border-color))
}

.univer-slider-shortcuts {
    transform: translate(-27.5px);
    display: grid;
    gap: var(--margin-xxs);
    align-items: center;
    box-sizing: border-box;
    width: 128px;
    padding: var(--padding-sm);
    font-size: var(--font-size-xs);
    background-color: rgb(var(--color-white));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg)
}

.univer-slider-shortcut {
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    padding: var(--padding-xs) 0 var(--padding-xs) 36px;
    color: rgb(var(--text-color));
    border-radius: var(--border-radius-base);
    transition: background .2s;
    text-decoration: none
}

.univer-slider-shortcut:hover {
    background-color: rgb(var(--bg-color-hover));
    color: inherit;
    text-decoration: inherit
}

.univer-slider-shortcut-icon {
    position: absolute;
    top: 0;
    left: var(--padding-xs);
    height: 100%;
    color: rgb(var(--success-color));
    display: flex;
    align-items: center
}

.univer-slider-shortcut-active {
    background-color: rgb(var(--bg-color-hover))
}

.univer-tree {
    user-select: none;
    position: relative;
    color: rgb(var(--text-color))
}

.univer-tree-icon {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--padding-lg));
    transform: translateY(-50%) rotate(-90deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px
}

.univer-tree-icon-expand {
    transform: translateY(-50%)
}

.univer-tree-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.univer-tree-list .univer-tree-list {
    overflow: hidden;
    height: 0
}

.univer-tree-list .univer-tree-list-expand {
    height: inherit
}

.univer-tree-list-item {
    position: relative;
    padding-left: var(--padding-xl)
}

.univer-tree-list-item>a {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer
}

.univer-tree-list-item-content {
    margin-bottom: 8px
}

.univer-tree-list-item-content-selected {
    color: rgb(var(--primary-color))
}

.univer-tree-list-item-content-selected-icon {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--padding-xl));
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg)
}

.univer-switch-wrapper {
    height: 16px
}

.univer-switch-wrapper .univer-switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px
}

.univer-switch-wrapper .univer-switch input {
    opacity: 0
}

.univer-switch-wrapper .univer-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(var(--bg-color-hover));
    transition: background-color .2s;
    border-radius: 16px
}

.univer-switch-wrapper .univer-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: rgb(var(--color-white));
    transition: transform .2s;
    border-radius: 50%
}

.univer-switch-wrapper input:checked+.univer-slider {
    background-color: rgb(var(--primary-color))
}

.univer-switch-wrapper input:checked+.univer-slider:before {
    transform: translate(12px)
}

.univer-theme {
    color: rgb(var(--text-color));
    font-family: Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased
}

.univer-render-canvas::selection {
    pointer-events: none
}

.univer-textarea {
    position: relative;
    width: 280px;
    padding: var(--padding-sm);
    box-sizing: border-box;
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base);
    overflow: hidden;
    transition: all .15s
}

.univer-textarea:hover,.univer-textarea:focus {
    border-color: rgb(var(--primary-color));
    outline: none
}

.univer-mentions {
    width: 100%
}

.univer-mentions__control {
    min-height: 32px
}

.univer-mentions__highlighter {
    border-radius: 6px;
    background: rgba(var(--color-white));
    padding: 6px 10px;
    font-size: 13px!important;
    line-height: 20px!important;
    max-height: 114px
}

.univer-mentions__highlighter strong {
    color: rgb(var(--blue-500))
}

.univer-mentions__highlighter__substring {
    visibility: inherit!important;
    color: rgb(var(--color-black))
}

.univer-mentions__input {
    width: 100%;
    caret-color: red;
    background-color: transparent;
    color: transparent;
    padding: 6px 10px;
    border: 1px solid rgb(var(--border-color));
    border-radius: 6px;
    font-size: 13px!important;
    line-height: 20px!important;
    max-height: 114px
}

.univer-mentions__input:focus {
    border: 1px solid rgb(var(--blue-500));
    outline: none!important
}

.univer-mentions__suggestions {
    border-radius: 8px;
    overflow: hidden;
    background: rgb(var(--color-white))!important;
    border: 1px solid rgb(var(--grey-200))!important;
    box-shadow: var(--box-shadow-base)!important;
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px!important
}

.univer-mentions__suggestions__list {
    display: flex;
    flex-direction: column;
    padding: 8px!important;
    width: 100%;
    box-sizing: border-box
}

.univer-mentions__suggestions__item {
    padding: 4px 8px;
    border-radius: 6px
}

.univer-mentions__suggestions__item--focused {
    background-color: rgb(var(--grey-50))
}

.univer-ui-plugin-sheets-font-family {
    overflow: hidden;
    width: 120px;
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap
}

.univer-ui-plugin-sheets-font-family-item {
    font-size: var(--font-size-xs)
}

.univer-ui-plugin-sheets-font-size {
    width: 28px;
    height: 24px;
    font-size: var(--font-size-xs)
}

.univer-ui-plugin-sheets-font-size-input {
    height: 24px;
    line-height: 24px;
    background-color: transparent;
    border: none
}

.univer-ui-plugin-sheets-font-size-input input {
    font-size: var(--font-size-xs);
    background-color: transparent
}

.univer-toolbar-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0;
    font-size: var(--font-size-lg);
    color: rgb(var(--text-color));
    background-color: transparent;
    border: none;
    border-radius: var(--border-radius-base);
    outline: none
}

.univer-toolbar-btn:not([disabled]):hover {
    background-color: rgb(var(--grey-100))
}

.univer-toolbar-btn[disabled] {
    cursor: not-allowed;
    color: rgb(var(--grey-200))
}

.univer-toolbar-btn-active {
    background-color: rgb(var(--grey-100))
}

.univer-toolbar-btn-active[disabled] {
    color: rgba(var(--text-color),.25)
}

.univer-headerbar {
    user-select: none;
    position: relative
}

.univer-headerbar>.univer-header-menu {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    box-sizing: border-box;
    height: 100%
}

.univer-headerbar>.univer-header-menu>div {
    user-select: none;
    display: inline-flex;
    align-items: center;
    height: 28px;
    margin-left: 4px;
    padding: 2px 4px;
    text-align: center;
    border-radius: 4px
}

.univer-headerbar>.univer-header-menu>div:hover {
    background-color: rgb(var(--grey-300))
}

.univer-menubar {
    display: flex;
    gap: var(--margin-xs);
    align-items: center;
    justify-content: center;
    height: 32px
}

.univer-menubar-item {
    cursor: pointer;
    display: block;
    padding: var(--padding-xs) var(--padding-sm);
    font-size: var(--font-size-xs);
    font-weight: 400;
    border-radius: var(--border-radius-base);
    transition: all .1s ease-in-out
}

.univer-menubar-item:hover:not(.univer-menubar-item-active) {
    background: rgb(var(--grey-300))
}

.univer-menubar-item-active {
    color: rgb(var(--color-white));
    background: rgb(var(--primary-color))
}

.univer-toolbar {
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 32px;
    font-size: var(--font-size-base);
    color: rgb(var(--text-color));
    background-color: rgb(var(--bg-color-secondary));
    border-bottom: 1px solid rgb(var(--border-color))
}

.univer-toolbar-container {
    padding: 0 var(--padding-lg);
    display: flex;
    gap: var(--margin-xs);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden
}

.univer-toolbar-more {
    max-width: 80%
}

.univer-toolbar-more-container {
    display: grid;
    box-sizing: border-box;
    padding: var(--padding-sm);
    background-color: rgb(var(--bg-color-secondary));
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base)
}

.univer-toolbar-more-container .univer-toolbar-group {
    flex-wrap: wrap
}

.univer-toolbar-more-container .univer-toolbar-group:not(:last-child):after {
    content: initial
}

.univer-toolbar-more-container .univer-toolbar-group:not(:last-child)>* {
    margin-bottom: var(--margin-xs)
}

.univer-toolbar-group {
    display: flex;
    gap: var(--margin-xs);
    align-items: center;
    flex-shrink: 0
}

.univer-toolbar-group>* {
    flex-shrink: 0
}

.univer-toolbar-group:not(:last-child,:empty):after {
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    background-color: rgb(var(--border-color));
    flex-shrink: 0
}

.univer-toolbar-item-select-button {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: var(--margin-xs);
    align-items: center;
    height: 24px;
    padding-right: 18px;
    font-size: var(--font-size-lg);
    border-radius: var(--border-radius-base)
}

.univer-toolbar-item-select-button-disabled {
    cursor: not-allowed;
    color: rgb(var(--grey-200))
}

.univer-toolbar-item-select-button-disabled.univer-toolbar-item-select-button-activated {
    color: rgba(var(--text-color),.25)
}

.univer-toolbar-item-select-button-disabled.univer-toolbar-item-select-button-activated .univer-toolbar-item-select-button-label:hover,.univer-toolbar-item-select-button-disabled.univer-toolbar-item-select-button-activated .univer-toolbar-item-select-button-arrow:hover {
    background-color: rgb(var(--grey-100))!important
}

.univer-toolbar-item-select-button-activated,.univer-toolbar-item-select-button:hover,.univer-toolbar-item-select-button:hover .univer-toolbar-item-select-button-label {
    background-color: rgb(var(--grey-100))
}

.univer-toolbar-item-select-button-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--padding-xs)
}

.univer-toolbar-item-select-button-label:hover {
    background-color: rgb(var(--grey-300))!important
}

.univer-toolbar-item-select-button-arrow {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-right: var(--padding-xs);
    color: rgb(var(--grey-400))
}

.univer-toolbar-item-select-button-arrow:hover {
    background-color: rgb(var(--grey-300))
}

.univer-toolbar-item-select {
    cursor: pointer;
    position: relative;
    display: flex;
    gap: var(--margin-xs);
    align-items: center;
    height: 24px;
    padding: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    border-radius: var(--border-radius-base)
}

.univer-toolbar-item-select-disabled {
    cursor: not-allowed;
    color: rgb(var(--grey-200))
}

.univer-toolbar-item-select-disabled.univer-toolbar-item-select-activated {
    color: rgba(var(--text-color),.25)
}

.univer-toolbar-item-select-disabled.univer-toolbar-item-select-activated:hover,.univer-toolbar-item-select-activated {
    background-color: rgb(var(--grey-100))
}

.univer-toolbar-item-select:hover {
    background-color: rgb(var(--grey-100));
    border-radius: var(--border-radius-base)
}

.univer-toolbar-item-select-arrow {
    display: flex;
    align-items: center;
    height: 100%;
    color: rgb(var(--grey-400))
}

.univer-toolbar-item-select-arrow-disabled {
    cursor: not-allowed;
    color: rgb(var(--grey-200))
}

.univer-toolbar-item-select-arrow-disabled.univer-toolbar-item-select-arrow-activated {
    color: rgba(var(--text-color),.25)
}

.univer-toolbar-item-select-arrow-disabled.univer-toolbar-item-select-arrow-activated:hover,.univer-toolbar-item-select-arrow-activated {
    background-color: rgb(var(--grey-100))
}

.univer-menu-item-no-hover,.univer-menu-item-no-hover.univer-menu-item-active {
    background: none
}

.univer-menu-item-activated {
    background-color: rgb(var(--bg-color-hover))
}

.univer-menu-item-content {
    display: inline-flex;
    gap: var(--margin-xs);
    align-items: center
}

.univer-menu-item-selectable {
    position: relative;
    padding-left: var(--padding-xl)
}

.univer-menu-item-selectable-icon {
    position: absolute;
    left: 0;
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-lg)
}

.univer-menu-item-more-icon {
    font-size: var(--font-size-sm);
    color: rgb(var(--text-color))
}

.univer-sidebar {
    position: relative;
    transform: translate(100%);
    box-sizing: border-box;
    width: 0;
    height: 100%;
    color: rgb(var(--text-color));
    transition: all .15s
}

.univer-sidebar.univer-sidebar-open {
    transform: translate(0);
    width: 380px
}

.univer-sidebar-container {
    overflow-y: auto;
    display: grid;
    grid-template-rows: auto 1fr auto;
    box-sizing: border-box;
    width: 100%;
    height: 0;
    min-height: 100%;
    margin: auto;
    background-color: rgb(var(--bg-color-secondary));
    border-bottom: 1px solid rgb(var(--border-color));
    border-left: 1px solid rgb(var(--border-color));
    scrollbar-color: rgba(var(--scrollbar-color),.7) transparent;
    scrollbar-gutter: auto;
    scrollbar-width: thin
}

.univer-sidebar-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: var(--padding-xl) var(--padding-xl) 0;
    font-size: var(--font-size-lg);
    font-weight: 500;
    background: rgb(var(--bg-color-secondary));
    box-sizing: border-box;
    z-index: 10
}

.univer-sidebar-header-close {
    cursor: pointer;
    color: rgb(var(--text-color-secondary))
}

.univer-sidebar-body {
    padding: 0 var(--padding-xl);
    box-sizing: border-box
}

.univer-sidebar-footer {
    position: sticky;
    bottom: 0;
    padding: var(--padding-xl);
    background: rgb(var(--bg-color-secondary));
    box-sizing: border-box
}

.univer-zen-zone {
    position: absolute;
    display: none
}

.univer-zen-zone-open {
    z-index: 100;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(var(--bg-color))
}

.univer-zen-zone-close {
    display: none
}

.univer-global-zone {
    position: absolute;
    display: none
}

.univer-global-zone-open {
    z-index: 100;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(var(--bg-color))
}

.univer-global-zone-close {
    display: none
}

.univer-float-dom-wrapper {
    z-index: 10
}

.univer-float-dom {
    overflow: hidden
}

.univer-notification {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    margin: var(--margin-xs) 0
}

.univer-notification-notice {
    display: flex;
    gap: var(--margin-xs);
    justify-content: space-between;
    width: 280px;
    padding: var(--padding-lg);
    font-size: var(--font-size-lg);
    background-color: rgb(var(--color-white));
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-lg)
}

.univer-notification-notice-wrapper {
    margin: var(--margin-xs) var(--margin-base)
}

.univer-notification-notice-content {
    display: inline-flex;
    gap: var(--margin-xs);
    align-items: center;
    align-items: flex-start
}

.univer-notification-notice-close {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    padding: var(--padding-xs);
    color: rgb(var(--text-color-secondary));
    border-radius: var(--border-radius-base);
    outline: none;
    transition: background-color .2s
}

.univer-notification-notice-close:hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-notification-icon {
    padding: var(--padding-xs)
}

.univer-notification-icon-success {
    color: rgb(var(--success-color))
}

.univer-notification-icon-info {
    color: rgb(var(--info-color))
}

.univer-notification-icon-warning {
    color: rgb(var(--warning-color))
}

.univer-notification-icon-error {
    color: rgb(var(--error-color))
}

.univer-notification-content-container {
    display: inline-flex;
    flex-direction: column;
    gap: var(--margin-xs);
    align-items: flex-start;
    padding-top: var(--padding-xs)
}

.univer-notification-title {
    color: rgb(var(--text-color))
}

.univer-notification-content {
    color: rgb(var(--text-color-secondary))
}

.univer-notification-content-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical
}

.univer-notification-top,.univer-notification-topLeft,.univer-notification-topRight {
    top: 0
}

.univer-notification-bottom,.univer-notification-bottomRight,.univer-notification-bottomLeft {
    bottom: 0
}

.univer-notification-bottomRight,.univer-notification-topRight {
    right: 0
}

.univer-notification-fade {
    overflow: hidden;
    transition: all .3s
}

.univer-notification-fade-appear-prepare {
    opacity: 0
}

.univer-notification-fade-appear-start {
    transform: translate(100%);
    opacity: 0
}

.univer-notification-fade-appear-active {
    transform: translate(0);
    opacity: 1
}

.univer-notification-fade-appear,.univer-notification-fade-enter {
    opacity: 0;
    animation-play-state: paused;
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.55,0,.55,.2);
    animation-fill-mode: both
}

.univer-notification-fade-leave {
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.55,0,.55,.2);
    animation-fill-mode: both;
    animation-play-state: paused
}

.univer-notification-fade-appear.univer-notification-fade-appear-active,.univer-notification-fade-enter.univer-notification-fade-enter-active {
    animation-name: univer-notification-fade-in;
    animation-play-state: running
}

.univer-notification-fade-leave.univer-notification-fade-leave-active {
    animation-name: univer-notification-fade-out;
    animation-play-state: running
}

@keyframes univer-notification-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes univer-notification-fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.univer-shortcut-panel-group-title {
    height: 40px;
    font-size: 13px;
    font-weight: 700;
    line-height: 40px
}

.univer-shortcut-panel-item {
    display: flex;
    justify-content: space-between;
    height: 40px;
    font-size: 13px;
    line-height: 40px
}

.univer-shortcut-panel-item-title {
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 200px;
    text-overflow: ellipsis;
    text-wrap: nowrap
}

.univer-shortcut-panel-item-shortcut {
    flex-grow: 0;
    flex-shrink: 0
}

.univer-shortcut-panel-item:not(:last-of-type) {
    border-bottom: 1px solid rgb(var(--grey-200))
}

.univer-app-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: rgb(var(--bg-color));
    min-height: 0;
    position: relative
}

.univer-app-header {
    width: 100vw
}

.univer-app-container {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0
}

.univer-app-container-header {
    position: relative;
    z-index: 10;
    width: 100%
}

.univer-app-container-wrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 100%;
    height: 100%;
    overflow: hidden
}

.univer-app-container-content {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    flex: 1;
    background-color: rgb(var(--bg-color-secondary));
    border-bottom: 1px solid rgb(var(--border-color))
}

.univer-app-container-canvas {
    position: relative;
    overflow: hidden
}

.univer-app-container-left-sidebar,.univer-app-container-sidebar {
    height: 100%
}

.univer-mobile-menu-container {
    min-width: 32px;
    max-width: 200px;
    display: grid;
    grid-gap: 4px;
    background-color: #000;
    border-radius: 4px;
    padding: 4px 8px
}

.univer-mobile-menu-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none;
    background: none;
    color: #fff;
    width: 48px
}

.univer-mobile-menu-item>svg {
    font-size: 18px;
    height: 18px;
    width: 18px
}

.univer-mobile-menu-item>span {
    width: 100%;
    margin-top: 2px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.univer-text-editor-container {
    position: relative;
    width: 100%;
    height: 30px;
    user-select: none;
    border: 1px solid rgb(var(--border-color));
    transition: all .15s;
    border-radius: var(--border-radius-base)
}

.univer-text-editor-container:hover,.univer-text-editor-container:active,.univer-text-editor-container-active,.univer-text-editor-container-active:hover {
    border: 1px solid rgb(var(--hyacinth-500))
}

.univer-text-editor-container-error,.univer-text-editor-container-error:hover {
    border: 1px solid rgb(var(--red-400))
}

.univer-text-editor-container-disabled,.univer-text-editor-container-disabled:hover {
    border-color: rgb(var(--grey-100))
}

.univer-text-editor-container-placeholder {
    position: absolute;
    top: 49%;
    left: 5px;
    transform: translateY(-50%);
    color: rgb(var(--grey-400));
    font-size: var(--font-size-xs);
    pointer-events: none
}

.univer-text-editor-validation-error {
    font-size: 10px;
    color: rgb(var(--red-400))
}

.univer-range-selector {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(var(--grey-600));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base);
    width: 220px;
    height: 28px
}

.univer-range-selector-editor {
    position: relative;
    user-select: none;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0
}

.univer-range-selector-icon {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-right: 4px;
    font-size: var(--font-size-lg);
    color: rgb(var(--text-color));
    background-color: transparent;
    border: none;
    border-radius: var(--border-radius-base);
    outline: none
}

.univer-range-selector-icon:not([disabled]):hover {
    background-color: rgb(var(--grey-100))
}

.univer-range-selector-icon[disabled] {
    cursor: not-allowed;
    color: rgb(var(--grey-200))
}

.univer-range-selector:hover,.univer-range-selector-active {
    border-color: rgb(var(--hyacinth-500))
}

.univer-range-selector-active .univer-range-selector-icon {
    color: rgb(var(--hyacinth-500))
}

.univer-range-selector-error {
    border-color: rgb(var(--red-400))
}

.univer-range-selector-error .univer-range-selector-icon {
    color: rgb(var(--red-400))
}

.univer-range-selector-error:hover {
    border-color: rgb(var(--red-400))
}

.univer-range-selector-disabled {
    border-color: rgb(var(--grey-100))
}

.univer-range-selector-disabled .univer-range-selector-icon {
    color: rgb(var(--grey-100))
}

.univer-range-selector-disabled:hover {
    border-color: rgb(var(--grey-100))
}

.univer-range-selector-modal {
    position: relative;
    max-height: 500px;
    overflow: hidden;
    overflow-y: auto
}

.univer-range-selector-modal-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px
}

.univer-range-selector-modal-container-input {
    display: inline-block;
    width: 280px
}

.univer-range-selector-modal-container-input-active {
    border-color: rgb(var(--hyacinth-500))
}

.univer-range-selector-modal-container-button {
    display: inline-block;
    text-align: center;
    width: 28px
}

.univer-range-selector-modal-container-button:hover {
    cursor: pointer;
    color: rgb(var(--hyacinth-500))
}

.univer-range-selector-modal-container-delete-button {
    margin: auto
}

.univer-range-selector-modal-add {
    position: relative;
    width: 300px;
    margin-top: 5px;
    text-align: left;
    color: rgb(var(--hyacinth-500));
    font-size: var(--font-size-xs)
}

.univer-range-selector-modal-add .univer-range-selector-modal-add-button {
    display: flex;
    align-items: center;
    justify-content: center
}

.univer-range-selector-modal-add .univer-range-selector-modal-add-button:hover {
    cursor: pointer;
    background-color: rgb(var(--hyacinth-500),.05)
}

.univer-progress-bar {
    width: 160px;
    height: 4px;
    background-color: rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    margin-right: 8px
}

.univer-progress-bar-container {
    display: flex;
    align-items: center;
    margin: 0 8px
}

.univer-progress-bar-inner {
    height: 4px;
    border-radius: var(--border-radius-lg);
    transition: width .5s
}

.univer-progress-bar-close-button {
    background: none;
    border: none;
    font-size: 12px;
    color: rgb(var(--text-color));
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center
}

.univer-progress-bar-close-button:hover {
    color: rgb(var(--text-color-secondary))
}

.univer-image-common-panel {
    text-align: center;
    padding: var(--padding-sm);
    font-size: var(--font-size-sm)
}

.univer-image-common-panel-grid {
    position: relative;
    width: 100%
}

.univer-image-common-panel-border {
    border-top: 1px solid rgb(var(--border-color));
    margin-top: 20px
}

.univer-image-common-panel-title {
    color: rgb(var(--text-color-secondary));
    text-align: left
}

.univer-image-common-panel-subtitle {
    color: rgb(var(--text-color-primary));
    text-align: left
}

.univer-image-common-panel-row {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    margin-top: 10px
}

.univer-image-common-panel-row-vertical {
    justify-content: center;
    align-items: center;
    height: 36px
}

.univer-image-common-panel-column {
    width: 100%
}

.univer-image-common-panel-column-center {
    display: flex;
    justify-content: center;
    align-items: center
}

.univer-image-common-panel-inline {
    display: flex;
    align-items: center;
    gap: var(--margin-xxs)
}

.univer-image-common-panel-span2 {
    width: 50%
}

.univer-image-common-panel-span3 {
    width: 33.33333333%
}

.univer-image-common-panel-input {
    width: 90%
}

.univer-image-popup-menu {
    display: grid;
    gap: var(--margin-xxs);
    align-items: center;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--padding-sm);
    font-size: var(--font-size-base);
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg)
}

.univer-image-popup-menu li {
    list-style: none
}

.univer-image-popup-menu-item {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 28px;
    font-size: var(--font-size-base);
    font-style: normal;
    line-height: 20px;
    text-align: left;
    border-radius: 4px;
    border-radius: var(--border-radius-base);
    transition: background .2s
}

.univer-image-popup-menu-item:hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-image-popup-menu-item-icon {
    position: absolute;
    top: 50%;
    left: var(--padding-xs);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center
}

.univer-image-popup-menu-item-title {
    padding: var(--padding-xs) var(--padding-xs) var(--padding-xs) 0;
    vertical-align: middle
}

.univer-image-popup-menu-item-hide {
    color: rgb(var(--text-color-secondary))
}

.univer-image-popup-menu-item:hover {
    background: rgb(var(--grey-100))
}

.univer-btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    background: #fff;
    border: 1px solid rgb(var(--grey-200, #e5e5e5));
    border-radius: 4px
}

.univer-btn-container:hover,.univer-btn-container.univer-btn-container-expand {
    background: rgb(var(--grey-100, #f5f5f5))
}

.univer-docs-ui-canvas-background {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgb(var(--grey-50));
    z-index: 1;
    user-select: none;
    pointer-events: none
}

.univer-panel {
    padding-top: 20px;
    font-size: var(--font-size-sm)
}

.univer-options-section {
    margin-top: 10px;
    padding-bottom: 10px
}

.univer-options-form-item {
    display: block;
    margin-bottom: 5px
}

.univer-options-input {
    width: 80%;
    margin-top: 5px
}

.univer-options-margin-setting {
    display: flex
}

.univer-upload-file-menu {
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center
}

.univer-upload-file-menu-input {
    display: none
}

.univer-image-common-panel {
    text-align: center;
    padding: var(--padding-sm);
    font-size: var(--font-size-sm)
}

.univer-image-common-panel-grid {
    position: relative;
    width: 100%
}

.univer-image-common-panel-border {
    border-top: 1px solid rgb(var(--border-color));
    margin-top: 20px
}

.univer-image-common-panel-title {
    color: rgb(var(--text-color-secondary));
    text-align: left
}

.univer-image-common-panel-subtitle {
    color: rgb(var(--text-color-primary));
    text-align: left
}

.univer-image-common-panel-row {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    margin-top: 10px
}

.univer-image-common-panel-row-vertical {
    justify-content: center;
    align-items: center;
    height: 36px
}

.univer-image-common-panel-column {
    width: 100%
}

.univer-image-common-panel-column-center {
    display: flex;
    justify-content: center;
    align-items: center
}

.univer-image-common-panel-inline {
    display: flex;
    align-items: center;
    gap: var(--margin-xxs)
}

.univer-image-common-panel-span2 {
    width: 50%
}

.univer-image-common-panel-span3 {
    width: 33.33333333%
}

.univer-image-common-panel-input {
    width: 90%
}

.univer-sheet-image-menu {
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center
}

.univer-sheet-image-menu-input {
    display: none
}

.univer-sheets-ui-context-menu-input {
    display: flex;
    gap: var(--margin-sm);
    align-items: center
}

.univer-sheets-ui-context-menu-input-container {
    width: 72px
}

.univer-sheets-ui-context-menu-input-number {
    height: 24px
}

.univer-sheet-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 36px;
    padding: 0 var(--padding-xl)
}

.univer-ui-plugin-sheets-border-panel {
    display: grid;
    gap: var(--margin-sm)
}

.univer-ui-plugin-sheets-border-panel-position {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: var(--margin-xxs);
    box-sizing: border-box;
    padding-bottom: var(--padding-base);
    border-bottom: 1px solid rgb(var(--border-color))
}

.univer-ui-plugin-sheets-border-panel-position-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: var(--font-size-lg);
    border-radius: var(--border-radius-base)
}

.univer-ui-plugin-sheets-border-panel-position-item:hover,.univer-ui-plugin-sheets-border-panel-position-item-active {
    background-color: rgb(var(--bg-color-hover))
}

.univer-ui-plugin-sheets-border-panel-styles {
    display: flex;
    gap: var(--margin-xs);
    align-items: center;
    justify-content: space-around
}

.univer-ui-plugin-sheets-border-panel-board {
    box-sizing: border-box;
    padding: var(--padding-base);
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-base)
}

.univer-ui-plugin-sheets-border-panel-button {
    cursor: pointer;
    position: relative;
    display: flex;
    gap: var(--margin-xs);
    align-items: center;
    height: 24px;
    padding: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    border-radius: var(--border-radius-base);
    transition: all .15s
}

.univer-ui-plugin-sheets-border-panel-button:hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-ui-plugin-sheets-border-panel-more-icon {
    color: rgb(var(--grey-400))
}

.univer-count-bar {
    display: flex;
    flex: 0 0 260px;
    justify-content: flex-end
}

.univer-editor-container {
    position: absolute;
    z-index: 10;
    top: 200px;
    left: 100px;
    display: flex;
    width: 100px;
    height: 50px;
    border: 1px solid rgb(var(--primary-color));
    box-shadow: none;
    box-sizing: border-box
}

.univer-editor-container .univer-editor-input {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    background: #fff
}

.univer-editor-container .univer-editor-input canvas {
    position: absolute;
    top: -1px!important;
    left: -1px!important
}

.univer-defined-name {
    display: flex;
    position: relative;
    transition: height .15s;
    border-right: 1px solid rgb(var(--border-color));
    height: 100%;
    width: 100px;
    box-sizing: border-box
}

.univer-defined-name-drop-down {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--padding-xs);
    cursor: pointer;
    position: absolute;
    right: 0;
    height: 100%
}

.univer-defined-name-drop-down:hover {
    background-color: rgb(var(--grey-50));
    color: rgb(var(--primary-color))
}

.univer-defined-name-drop-down-disable {
    color: rgb(var(--grey-200));
    cursor: not-allowed
}

.univer-defined-name-drop-down-disable:hover {
    color: rgb(var(--grey-200))
}

.univer-defined-name-overlay {
    position: relative;
    border: 1px solid rgb(var(--border-color));
    width: 300px;
    background-color: rgb(var(--color-white));
    transform: translate(-75px)
}

.univer-defined-name-overlay-container {
    position: relative;
    height: 100%;
    max-height: 400px;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(var(--scrollbar-color),.7) transparent;
    scrollbar-gutter: auto;
    scrollbar-width: thin
}

.univer-defined-name-overlay-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-xs);
    border-bottom: 1px solid rgb(var(--border-color));
    user-select: none;
    cursor: pointer
}

.univer-defined-name-overlay-item:hover {
    background-color: rgb(var(--grey-50))
}

.univer-defined-name-overlay-item-name {
    font-size: var(--font-size-md);
    color: rgb(var(--grey-900));
    margin: 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1
}

.univer-defined-name-overlay-item-name-for-sheet {
    font-size: var(--font-size-xxs);
    color: rgb(var(--grey-400));
    margin-left: 5px;
    font-weight: 400
}

.univer-defined-name-overlay-item-formula {
    font-size: var(--font-size-xs);
    color: rgb(var(--grey-800));
    margin: 5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1
}

.univer-defined-name-overlay-manager {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 70px;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    bottom: -70px;
    background-color: rgb(var(--color-white))
}

.univer-defined-name-overlay-manager:hover {
    background-color: rgb(var(--grey-50))
}

.univer-defined-name-overlay-manager-title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin: var(--margin-xs);
    margin-bottom: 0;
    color: rgb(var(--grey-800))
}

.univer-defined-name-overlay-manager-content {
    font-size: var(--font-size-xxs);
    margin: var(--margin-xs);
    color: rgb(var(--grey-500))
}

.univer-defined-name-container {
    width: 100%;
    position: relative
}

.univer-defined-name-container-scroll {
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    position: absolute
}

.univer-defined-name-container-addButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-top: 1px solid rgb(var(--border-color));
    border-bottom: 1px solid rgb(var(--border-color));
    font-size: var(--font-size-md);
    color: rgb(var(--primary-color))
}

.univer-defined-name-container-addButton:hover {
    background-color: rgb(var(--grey-50));
    cursor: pointer
}

.univer-defined-name-container-addButton-text {
    margin-left: 5px
}

.univer-defined-name-container-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-xs);
    border-bottom: 1px solid rgb(var(--border-color));
    user-select: none;
    cursor: default
}

.univer-defined-name-container-item-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: rgb(var(--color-black));
    margin: 5px 0;
    max-width: 190px;
    max-height: 100px;
    overflow: hidden
}

.univer-defined-name-container-item-name-for-sheet {
    font-size: var(--font-size-xxs);
    color: rgb(var(--grey-400));
    margin-left: 5px;
    font-weight: 400
}

.univer-defined-name-container-item-formula-or-refString {
    font-size: var(--font-size-xs);
    color: rgb(var(--grey-500));
    font-weight: 400;
    margin: 5px 0;
    max-height: 100px;
    text-overflow: ellipsis;
    overflow: hidden
}

.univer-defined-name-container-item-update {
    position: absolute;
    font-size: var(--font-size-xs);
    color: rgb(var(--primary-color));
    cursor: pointer;
    padding: 4px;
    transform: translateY(-50%);
    border-radius: var(--border-radius-base);
    right: 60px;
    top: 20px
}

.univer-defined-name-container-item-update:hover {
    background-color: rgb(var(--hyacinth-50))
}

.univer-defined-name-container-item-delete {
    position: absolute;
    font-size: var(--font-size-xs);
    color: rgb(var(--error-color));
    cursor: pointer;
    padding: 4px;
    right: 20px;
    top: 20px;
    transform: translateY(-50%);
    border-radius: var(--border-radius-base)
}

.univer-defined-name-container-item-delete:hover {
    background-color: rgb(var(--hyacinth-50))
}

.univer-defined-name-container-item-show {
    display: none
}

.univer-defined-name-container-item:hover {
    background-color: rgb(var(--grey-50))
}

.univer-defined-name-container-item:hover .univer-defined-name-container-item-show {
    display: block
}

.univer-defined-name-input {
    display: flex;
    align-items: center;
    justify-content: left;
    border-bottom: 1px solid rgb(var(--border-color));
    padding-bottom: 5px
}

.univer-defined-name-input>div {
    width: 100%;
    margin-top: 5px
}

.univer-defined-name-input-validation {
    display: flex;
    align-items: center;
    justify-content: left;
    color: rgb(var(--error-color));
    font-size: var(--font-size-xs)
}

.univer-defined-name-input-validation>span {
    margin-right: 2px
}

.univer-defined-name-input-disable {
    color: rgb(var(--grey-200));
    cursor: not-allowed
}

.univer-formula-box {
    display: flex;
    box-sizing: border-box;
    height: 28px;
    background: rgb(var(--bg-color-secondary));
    border-bottom: 1px solid rgb(var(--border-color));
    transition: height .15s
}

.univer-formula-box .univer-name-ranges {
    box-sizing: border-box;
    width: 100px;
    height: 100%;
    position: relative
}

.univer-formula-box .univer-formula-bar {
    display: flex;
    width: 100%;
    height: 100%
}

.univer-formula-box .univer-formula-bar .univer-formula-icon {
    padding: 6px 0
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-disable {
    color: rgb(var(--grey-200));
    cursor: not-allowed
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 80px;
    height: 100%;
    font-size: var(--font-size-xs);
    border-right: 1px solid rgb(var(--border-color))
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-xs);
    font-size: var(--font-size-lg);
    border-radius: var(--border-radius-base)
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-success.univer-formula-active {
    cursor: pointer;
    color: rgb(var(--success-color))
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-success.univer-formula-active:hover {
    background-color: rgb(var(--grey-50))
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-error.univer-formula-active {
    cursor: pointer;
    color: rgb(var(--error-color))
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-error.univer-formula-active:hover {
    background-color: rgb(var(--grey-50))
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-fx {
    cursor: pointer
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-fx:hover {
    background-color: rgb(var(--grey-50))
}

.univer-formula-box .univer-formula-bar .univer-formula-input {
    overflow: hidden;
    display: flex;
    flex: 1;
    width: 100%;
    padding: 0 0 0 10px
}

.univer-formula-box .univer-formula-bar .univer-formula-input .univer-formula-content {
    position: relative;
    width: 100%;
    height: 100%;
    word-wrap: break-word;
    outline: none
}

.univer-formula-box .univer-formula-bar .univer-formula-input .univer-arrow-container {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 100%;
    font-size: var(--font-size-xs);
    color: rgb(var(--text-color-secondary))
}

.univer-formula-box .univer-formula-bar .univer-formula-input .univer-arrow-container-disable {
    color: rgb(var(--grey-200));
    cursor: not-allowed
}

.univer-operate-container {
    position: absolute;
    z-index: 10;
    right: 0;
    left: 0;
    width: 0;
    height: 0
}

.univer-auto-fill-popup-menu {
    display: grid;
    gap: var(--margin-xxs);
    align-items: center;
    box-sizing: border-box;
    min-width: 128px;
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--padding-sm);
    font-size: var(--font-size-base);
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg)
}

.univer-auto-fill-popup-menu li {
    list-style: none
}

.univer-auto-fill-popup-menu-item {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 134px;
    height: 28px;
    padding: var(--padding-xs) 0 var(--padding-xs) 36px;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    color: rgb(var(--black, #35322b));
    text-align: left;
    border-radius: 4px;
    border-radius: var(--border-radius-base);
    transition: background .2s
}

.univer-auto-fill-popup-menu-item:hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-auto-fill-popup-menu-item-icon {
    position: absolute;
    top: 50%;
    left: var(--padding-xs);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center
}

.univer-auto-fill-popup-menu-item-title {
    padding: var(--padding-xs) var(--padding-xs) var(--padding-xs) 0;
    vertical-align: middle
}

.univer-auto-fill-popup-menu-item-hide {
    color: rgb(var(--text-color-secondary))
}

.univer-auto-fill-popup-menu-item:hover {
    background: rgb(var(--grey-100))
}

.univer-btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    background: #fff;
    border: 1px solid rgb(var(--grey-200, #e5e5e5));
    border-radius: 4px
}

.univer-btn-container:hover,.univer-btn-container.univer-btn-container-expand {
    background: rgb(var(--grey-100, #f5f5f5))
}

.univer-sheet-bar {
    position: relative;
    display: flex;
    flex: 1 1 0px;
    flex-direction: row;
    min-width: calc(100% - 592px);
    max-width: calc(100% - 260px);
    height: 100%;
    background-color: rgb(var(--bg-color))
}

.univer-sheet-bar-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: var(--margin-xxs);
    transition: display .2s
}

.univer-sheet-bar-options-divider:after {
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    margin: 0 var(--margin-xs);
    background-color: rgb(var(--grey-400))
}

.univer-sheet-bar-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: var(--font-size-lg);
    color: rgb(var(--text-color-secondary-darker));
    background-color: transparent;
    border: none;
    border-radius: var(--border-radius-base);
    outline: none
}

.univer-sheet-bar-btn:not([disabled]):hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-sheet-bar-btn[disabled] {
    cursor: not-allowed;
    color: rgb(var(--grey-200))
}

.univer-sheet-bar-menu {
    display: grid;
    gap: var(--margin-xxs);
    align-items: center;
    box-sizing: border-box;
    padding: var(--padding-sm);
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg)
}

.univer-sheet-bar-menu li {
    list-style: none
}

.univer-sheet-bar-menu-item {
    cursor: pointer;
    position: relative;
    display: flex;
    box-sizing: border-box;
    padding: var(--padding-xs) 24px;
    color: rgb(var(--text-color));
    border-radius: var(--border-radius-base);
    transition: background .2s
}

.univer-sheet-bar-menu-item:hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-sheet-bar-menu-item-icon {
    position: absolute;
    top: 50%;
    left: var(--margin-xxs);
    transform: translateY(-50%);
    color: transparent
}

.univer-sheet-bar-menu-item-hide .univer-sheet-bar-menu-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: rgb(var(--grey-400))
}

.univer-sheet-bar-menu-item-select {
    font-weight: 500;
    color: rgb(var(--primary-color))
}

.univer-sheet-bar-menu-item-select .univer-sheet-bar-menu-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: rgb(var(--primary-color))
}

.univer-sheet-bar-menu-item-label {
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 20px;
    display: flex;
    align-items: center
}

.univer-slide-tab-bar-container {
    overflow: hidden;
    max-width: calc(100% - 112px)
}

.univer-slide-tab-bar-container .univer-slide-tab-bar {
    user-select: none;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--padding-xs) 6px;
    transition: box-shadow .2s
}

.univer-slide-tab-item {
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: center;
    box-sizing: border-box;
    margin: 0 var(--margin-xxs);
    font-size: var(--font-size-xs);
    line-height: 16px;
    color: rgb(var(--grey-1000));
    border-radius: var(--border-radius-base)
}

.univer-slide-tab-item:not(.univer-slide-tab-active):hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-slide-tab-item .univer-slide-tab-div {
    box-sizing: border-box;
    padding: var(--padding-xs) var(--padding-sm);
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--border-radius-base);
    display: flex;
    align-items: center
}

.univer-slide-tab-item .univer-slide-tab-div-edit {
    cursor: text;
    outline: none
}

.univer-slide-tab-item .univer-slide-tab-div-edit::selection {
    color: rgb(var(--color-white));
    background-color: rgb(var(--primary-color))
}

.univer-slide-tab-active {
    font-weight: 700;
    color: rgb(var(--primary-color));
    background-color: rgb(var(--bg-color-secondary));
    box-shadow: 0 0 8px #00000014;
    transition: box-shadow .2s;
    display: flex;
    justify-content: center
}

.univer-slide-tab-item-dropdown {
    user-select: none;
    min-width: auto!important
}

.univer-status-bar {
    display: flex;
    align-items: center;
    max-width: 332px
}

.univer-status-bar.univer-single-mode {
    max-width: 136px
}

.univer-status-bar-div {
    width: 1px;
    height: 16px;
    margin-left: 10px;
    background: rgb(var(--grey-400, #ccc))
}

.univer-statistic-list {
    display: flex
}

.univer-statistic-list-column {
    flex-direction: column
}

.univer-statistic-list-column .univer-statistic-item {
    font-size: 12px;
    line-height: 140%;
    color: rgb(var(--grey-500))
}

.univer-statistic-item {
    cursor: default;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    max-width: 106px;
    margin-right: 8px;
    font-size: var(--font-size-xxs);
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    color: rgb(var(--grey-900));
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.univer-statistic-item:hover {
    color: rgb(var(--color-black))
}

.univer-statistic-picker {
    display: grid;
    gap: var(--margin-sm);
    align-items: center;
    box-sizing: border-box;
    width: 196px;
    padding: var(--padding-base);
    font-size: var(--font-size-xs);
    background-color: rgb(var(--color-white));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg)
}

.univer-statistic-picker-item {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.univer-statistic-more {
    transform: rotate(90deg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 12px;
    color: rgb(var(--grey-600, #e8e8e8));
    border-radius: 4px
}

.univer-statistic-more:hover {
    background: rgb(var(--grey-300, #e8e8e8))
}

.univer-cell-alert {
    box-sizing: border-box;
    box-shadow: var(--box-shadow-base);
    padding: var(--padding-sm) var(--padding-base);
    border-radius: var(--border-radius-lg);
    color: rgba(var(--color-black));
    background: rgba(var(--color-white));
    z-index: 100;
    width: 156px
}

.univer-cell-alert-title {
    height: 20px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 6px;
    line-height: 20px
}

.univer-cell-alert-icon {
    margin-right: 6px
}

.univer-cell-alert-icon-error {
    color: rgba(var(--red-400))
}

.univer-cell-alert-icon-info {
    color: rgba(var(--blue-500))
}

.univer-cell-alert-icon-warning {
    color: rgba(var(--gold-400))
}

.univer-cell-alert-content {
    font-size: var(--font-size-sm);
    word-break: break-all
}

.univer-spin-container {
    position: relative;
    width: 100%;
    height: 100%
}

.univer-spin-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    background-color: #ffffff80;
    z-index: 10
}

.univer-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: univer-spin 2s linear infinite
}

.univer-content-blur {
    filter: blur(2px);
    pointer-events: none
}

@keyframes univer-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.univer-permission-panel-detail-wrapper {
    margin-top: 16px;
    height: 100%
}

.univer-radio-group-vertical {
    display: flex;
    flex-direction: column;
    font-weight: 400
}

.univer-sheet-permission-design-person-panel {
    height: 300px;
    border: 1px solid rgb(var(--grey-200));
    border-radius: var(--border-radius-lg);
    padding: var(--padding-base);
    margin-bottom: var(--margin-xs);
    display: flex;
    flex-direction: column
}

.univer-sheet-permission-design-person-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.univer-sheet-permission-design-person-panel-header-add {
    cursor: pointer;
    color: rgb(var(--blue-500))
}

.univer-sheet-permission-design-person-panel-split {
    height: 1px;
    background-color: rgb(var(--grey-200));
    margin: var(--margin-xs) 0
}

.univer-sheet-permission-design-person-panel-content-item {
    height: 28px;
    line-height: 28px;
    margin-bottom: var(--margin-sm);
    display: flex;
    align-items: center
}

.univer-sheet-permission-design-person-panel-content-item:last-child {
    margin-bottom: 0
}

.univer-sheet-permission-design-person-panel-content-item-name {
    width: 130px;
    color: rgb(var(--color-black));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 6px
}

.univer-sheet-permission-design-person-panel-content-item-select {
    width: 90px;
    cursor: pointer
}

.univer-sheet-permission-design-person-panel .univer-sheet-permission-design-person-panel-content-item-select.univer-select-single:not(.univer-select-customize-input) .univer-select-selector {
    border: none;
    padding: 0;
    color: rgb(var(--grey-900))
}

.univer-sheet-permission-design-person-panel .univer-sheet-permission-design-person-panel-content-item-select.univer-select-show-arrow .univer-select-arrow {
    right: 0
}

.univer-sheet-permission-design-person-panel-content {
    flex: 1
}

.univer-sheet-permission-panel-title {
    font-weight: 500
}

.univer-permission-range-selector {
    font-weight: 400
}

.univer-permission-range-selector-error,.univer-sheet-permission-panel-name-input-error,.univer-permission-range-selector-error:hover,.univer-sheet-permission-panel-name-input-error:hover {
    border: 1px solid rgb(var(--red-400))
}

.univer-permission-range-selector-error-text,.univer-sheet-permission-panel-name-input-error-text {
    height: 20px;
    line-height: 20px;
    color: rgb(var(--red-400));
    font-size: var(--font-size-xs);
    font-weight: 400
}

.univer-sheet-permission-list-panel-wrapper {
    margin-top: var(--margin-xs);
    height: 100%
}

.univer-sheet-permission-list-panel-header {
    display: flex;
    padding: var(--padding-sm) 0;
    height: 30px
}

.univer-sheet-permission-list-panel-header-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: var(--margin-lg);
    cursor: pointer
}

.univer-sheet-permission-list-panel-header-type div {
    height: 24px;
    line-height: 24px
}

.univer-sheet-permission-list-panel-header-type-bottom {
    height: 2px;
    width: 24px;
    background-color: rgb(var(--blue-500));
    margin-top: var(--margin-xxs)
}

.univer-sheet-permission-list-panel-header-select {
    color: rgb(var(--blue-500));
    height: 24px;
    line-height: 24px;
    font-size: var(--font-size-lg);
    font-weight: 500
}

.univer-sheet-permission-list-item-header-icon {
    border-radius: var(--border-radius-base);
    height: 24px;
    padding: 4px;
    box-sizing: border-box
}

.univer-sheet-permission-list-item-header-icon:hover {
    background-color: rgb(var(--grey-200))
}

.univer-sheet-permission-list-item {
    margin-top: var(--margin-sm);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgb(var(--grey-200));
    padding: var(--padding-base)
}

.univer-sheet-permission-list-item:hover {
    background-color: rgb(var(--grey-50))
}

.univer-sheet-permission-list-item-header {
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: space-between
}

.univer-sheet-permission-list-item-header-name {
    font-weight: 500;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.univer-sheet-permission-list-item-header-operator {
    display: flex;
    align-items: center
}

.univer-sheet-permission-list-item-header-operator div {
    margin-left: var(--margin-xs)
}

.univer-sheet-permission-list-item-split {
    height: 1px;
    background-color: rgb(var(--grey-200));
    margin: var(--margin-xs) 0
}

.univer-sheet-permission-list-item-content-edit {
    display: flex;
    align-items: center
}

.univer-sheet-permission-list-item-content-view {
    display: flex;
    align-items: center;
    margin-top: var(--margin-xs)
}

.univer-sheet-permission-list-item-content-desc {
    font-size: 12px;
    color: rgb(var(--grey-400));
    max-width: 256px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: var(--margin-xs)
}

.univer-sheet-permission-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%
}

.univer-sheet-permission-list-empty-text {
    width: 240px;
    word-wrap: break-word;
    color: rgb(var(--grey-400));
    font-size: 13px
}

.univer-sheet-permission-list-item-content-title {
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    flex-grow: 1;
    color: rgb(var(--color-black))
}

.univer-sheet-permission-list-item-content-sub {
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    color: rgb(var(--grey-600))
}

.univer-sheet-permission-panel-footer {
    display: flex;
    flex-direction: row-reverse
}

.univer-sheet-permission-panel-footer-cancel {
    margin-right: 12px
}

.univer-sheet-permission-panel-add-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.univer-sheet-permission-panel-add-button div {
    margin-right: 4px
}

.univer-sheet-permission-user-dialog-wrapper {
    height: 329px;
    padding: var(--padding-base);
    box-sizing: content-box
}

.univer-sheet-permission-user-dialog-search-input {
    width: 256px;
    height: 32px
}

.univer-sheet-permission-user-list {
    height: 240px;
    overflow-y: auto
}

.univer-sheet-permission-user-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%
}

.univer-sheet-permission-user-list-empty-text {
    width: 240px;
    word-wrap: break-word;
    color: rgb(var(--grey-400));
    font-size: 13px
}

.univer-sheet-permission-user-item {
    display: flex;
    align-items: center;
    margin: var(--margin-xs) 0;
    border-radius: 6px;
    padding: var(--padding-xs) var(--padding-sm)
}

.univer-sheet-permission-user-item:hover {
    background-color: rgb(var(--grey-50))
}

.univer-sheet-permission-user-item div {
    margin-left: 6px
}

.univer-sheet-permission-user-item-name {
    width: 186px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.univer-sheet-permission-split {
    height: 1px;
    background-color: rgb(var(--grey-200))
}

.univer-sheet-permission-user-dialog-footer {
    height: 36px;
    padding: var(--padding-xs) 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--margin-xs);
    height: 28px
}

.univer-sheet-permission-user-dialog-button {
    height: 28px;
    line-height: 28px;
    padding: 0px var(--padding-base)
}

.univer-sheet-permission-dialog-wrapper {
    display: flex;
    flex-direction: column;
    padding: 2px
}

.univer-sheet-permission-dialog-split {
    height: 1px;
    background-color: rgb(var(--grey-200))
}

.univer-sheet-permission-dialog-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
    line-height: 20px;
    margin: 6px 0
}

.univer-sheet-permission-user-dialog-footer {
    height: 36px;
    padding: var(--padding-xs) 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--margin-xs)
}

.univer-sheet-permission-user-dialog-footer-confirm {
    margin-left: var(--margin-sm)
}

.univer-sheet-permission-user-dialog-button {
    height: 32px;
    line-height: 32px;
    padding: 0px var(--padding-base)
}

.univer-sheet-permission-alert-dialog {
    padding: var(--padding-xl) 24px
}

.univer-sheet-permission-alert-dialog-title {
    font-size: var(--font-size-lg);
    font-weight: 500;
    margin-bottom: var(--margin-base)
}

.univer-sheet-permission-alert-dialog-button {
    margin-top: var(--margin-lg);
    display: flex;
    justify-content: flex-end
}

.sheet-permission-user-dialog .univer-dialog-close,.sheet-permission-user-dialog .univer-dialog-header {
    display: none
}

.sheet-permission-user-dialog .univer-dialog-body {
    padding: 0
}

.univer-mobile-sheet-bar-container {
    width: 100%;
    overflow-x: scroll;
    height: 32px;
    background-color: rgb(var(--bg-color))
}

.univer-mobile-sheet-bar-slider {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 32px
}

.univer-mobile-sheet-bar-item {
    align-items: center;
    box-sizing: border-box;
    flex-grow: 1;
    flex-shrink: 0;
    flex-wrap: nowrap;
    font-size: 12px;
    height: 100%;
    line-height: 28px;
    min-width: 48px;
    overflow: hidden;
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid rgb(var(--border-color));
    background-color: rgb(var(--bg-color));
    text-overflow: ellipsis;
    max-width: 120px
}

.univer-mobile-sheet-bar-item.univer-mobile-sheet-bar-item-activated {
    color: rgb(var(--primary-color));
    background-color: rgb(var(--bg-color-secondary))
}

.univer-formula-help-function {
    user-select: none;
    box-sizing: border-box;
    width: 250px;
    margin: 0;
    line-height: 20px;
    list-style: none;
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    outline: none;
    box-shadow: var(--box-shadow-base)
}

.univer-formula-help-function-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: var(--padding-base) var(--padding-lg);
    font-size: var(--font-size-xxs);
    font-weight: 500;
    color: rgb(var(--text-color));
    overflow-wrap: anywhere;
    border-bottom: 1px solid rgb(var(--border-color))
}

.univer-formula-help-function-title-icons {
    display: flex
}

.univer-formula-help-function-title-icon {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: var(--margin-xs);
    padding: 0;
    font-size: var(--font-size-xs);
    color: rgb(var(--text-color-secondary));
    background-color: transparent;
    border: none;
    border-radius: var(--border-radius-base);
    outline: none;
    transition: background-color .2s
}

.univer-formula-help-function-title-icon:hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-formula-help-function-content {
    overflow-y: auto;
    box-sizing: border-box;
    max-height: 350px;
    padding: 0 var(--padding-lg) var(--padding-base) var(--padding-lg)
}

.univer-formula-help-function-content-inner {
    margin-top: var(--margin-sm)
}

.univer-formula-help-function-content-params {
    margin: var(--margin-xs) 0
}

.univer-formula-help-function-content-params-title {
    margin-bottom: var(--margin-xs);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: rgb(var(--text-color))
}

.univer-formula-help-function-content-params-detail {
    font-size: var(--font-size-xxs);
    font-weight: 400;
    white-space: pre-wrap;
    color: rgb(var(--text-color-secondary))
}

.univer-formula-help-function-active {
    color: rgb(var(--primary-color))
}

.univer-formula-help-decorator {
    cursor: pointer;
    position: fixed;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-xs)
}

.univer-formula-help-param,.univer-formula-help-param-prefix,.univer-formula-help-param-item,.univer-formula-help-param-active {
    z-index: 1
}

.univer-formula-search-function {
    box-sizing: border-box;
    width: 250px;
    max-height: 400px;
    margin: 0;
    padding: var(--padding-sm);
    line-height: 20px;
    list-style: none;
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    outline: none;
    box-shadow: var(--box-shadow-base);
    overflow: hidden;
    overflow-y: auto
}

.univer-formula-search-function-item {
    cursor: pointer;
    box-sizing: border-box;
    padding: var(--padding-xs) var(--padding-sm);
    color: rgb(var(--text-color));
    border-radius: var(--border-radius-base);
    transition: background .2s
}

.univer-formula-search-function-item-name {
    font-size: var(--font-size-xxs)
}

.univer-formula-search-function-item-name-light {
    color: rgb(var(--error-color))
}

.univer-formula-search-function-item-desc {
    display: block;
    font-size: var(--font-size-xxs);
    color: rgb(var(--grey-500))
}

.univer-formula-search-function-item-active {
    background-color: rgb(var(--bg-color-hover))
}

.univer-formula-more-functions {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    line-height: 20px
}

.univer-formula-more-functions-operation {
    display: flex;
    justify-content: flex-end
}

.univer-formula-more-functions-operation>button {
    margin: 0 0 var(--margin-lg) var(--margin-base)
}

.univer-formula-function-params {
    margin-bottom: var(--margin-xs);
    font-size: var(--font-size-xxs)
}

.univer-formula-function-params-title {
    font-weight: 500;
    color: rgb(var(--text-color-secondary))
}

.univer-formula-function-params-detail {
    font-weight: 400;
    color: rgb(var(--text-color))
}

.univer-formula-input-params-list {
    overflow-y: auto;
    height: 364px
}

.univer-formula-input-params-list-item-name {
    font-size: var(--font-size-sm)
}

.univer-formula-input-params-list-item-selector {
    margin: var(--margin-xxs) 0 var(--margin-xs) 0
}

.univer-formula-select-function-select {
    display: flex;
    gap: 10%;
    align-items: center;
    justify-content: space-between
}

.univer-formula-select-function-result {
    user-select: none;
    overflow-y: auto;
    box-sizing: border-box;
    width: 100%;
    max-height: 364px;
    margin: 0;
    margin-top: var(--margin-xs);
    padding: var(--padding-base);
    list-style: none;
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base);
    outline: none
}

.univer-formula-select-function-result-item {
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    padding: var(--padding-xs) 28px;
    font-size: var(--font-size-xs);
    color: rgb(var(--text-color));
    border-radius: var(--border-radius-base);
    transition: background .2s
}

.univer-formula-select-function-result-item>span {
    display: block
}

.univer-formula-select-function-result-item-name-light {
    color: rgb(var(--error-color))
}

.univer-formula-select-function-result-item-selected {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    font-size: var(--font-size-lg);
    color: rgb(var(--success-color))
}

.univer-formula-select-function-result-item-active {
    background-color: rgb(var(--bg-color-hover))
}

.univer-formula-select-function-content {
    overflow-y: auto;
    max-height: 307px;
    margin: var(--margin-xs) 0
}

.numfmt-panel {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}

.numfmt-panel .group-title {
    font-size: 16px;
    color: rgba(var(--color-black))
}

.numfmt-panel .label {
    font-size: 15px;
    color: rgba(var(--grey-400))
}

.numfmt-panel .describe {
    font-size: 13px;
    line-height: 20px;
    color: rgba(var(--grey-600))
}

.numfmt-panel .preview {
    height: 36px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 36px;
    color: var(--color-black);
    border: 1px solid rgb(var(--grey-200));
    border-radius: 4px
}

.numfmt-panel .btn-list {
    display: flex;
    justify-content: flex-end
}

.numfmt-panel .m-r-12 {
    margin-right: 12px
}

.numfmt-panel .m-t-16 {
    margin-top: 16px
}

.numfmt-panel .m-t-14 {
    margin-top: 14px
}

.numfmt-panel .m-t-8 {
    margin-top: 8px
}

.numfmt-panel .m-b-20 {
    margin-bottom: 20px
}

.options {
    display: flex;
    justify-content: space-between
}

.options .w-140 {
    width: 140px
}

.options .w-120 {
    width: 120px
}

.more-numfmt-type {
    display: flex;
    flex-shrink: 0;
    padding: 0 4px;
    font-size: 13px;
    color: var(--black)
}

.more-numfmt-type .icon {
    display: flex;
    align-items: center;
    height: auto;
    padding-left: 8px;
    color: rgb(var(--grey-400))
}

.more-numfmt-type-options .line {
    width: 100%;
    height: 1px;
    background-color: rgb(var(--grey-200))
}

.more-numfmt-type-options .m-t-4 {
    margin-top: 4px
}

.more-numfmt-type-options .option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    padding: 0 8px;
    font-size: 13px
}

.more-numfmt-type-options .option-item:hover {
    background-color: rgb(var(--grey-100));
    border-radius: var(--border-radius-base)
}

.more-numfmt-type-options .m-l-26 {
    margin-left: 26px
}

.univer-zen-editor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.univer-zen-editor-icon-wrapper {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 60px;
    height: 30px
}

.univer-zen-editor-icon-container {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px
}

.univer-zen-editor-icon-success {
    color: rgb(var(--success-color))
}

.univer-zen-editor-icon-error {
    color: rgb(var(--error-color))
}

.univer-zen-editor-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.univer-data-validation-formula {
    width: 100%
}

.univer-data-validation-formula-and {
    margin-top: -4px;
    font-size: var(--font-size-sm);
    color: rgba(var(--grey-400))
}

.univer-data-validation-formula-list-item {
    display: flex;
    padding-bottom: 2px;
    align-items: center
}

.univer-data-validation-formula-list-item-icon {
    font-size: 16px;
    cursor: pointer;
    margin-left: 4px;
    border-radius: 4px
}

.univer-data-validation-formula-list-item-icon:hover {
    background: rgba(var(--grey-100))
}

.univer-data-validation-formula-list-item-drag {
    cursor: move
}

.univer-data-validation-formula-list-add {
    color: #274fee;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 4px;
    padding: 4px 8px;
    width: fit-content
}

.univer-data-validation-formula-list-add svg {
    margin-right: 4px
}

.univer-data-validation-formula-list-add:hover {
    background: #274fee0d
}

.univer-data-validation-formula-color-select {
    width: 92px;
    margin-left: 4px;
    margin-right: 8px
}

.univer-data-validation-formula-color-select-panel {
    width: 112px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 4px 4px 12px;
    flex-wrap: wrap;
    box-sizing: border-box
}

.univer-data-validation-formula-color-select-panel .univer-data-validation-formula-color-item {
    margin-bottom: 8px;
    margin-right: 8px;
    box-sizing: border-box;
    cursor: pointer
}

.univer-data-validation-formula-color-item {
    border-radius: 3px;
    border: 1px solid rgba(var(--grey-400));
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    font-size: 16px
}

.univer-data-validation-options-button {
    cursor: pointer;
    margin-bottom: 12px;
    font-size: var(--font-size-sm);
    color: rgba(var(--color-black));
    display: flex;
    align-items: center
}

.univer-data-validation-options-button-icon {
    font-size: 8px;
    margin-left: 4px
}

.univer-data-validation-detail-form-item {
    width: 100%
}

.univer-data-validation-detail-buttons {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.univer-data-validation-detail-button {
    margin-left: 12px
}

.univer-data-validation-item-container {
    border-radius: var(--border-radius-base);
    background-color: rgba(var(--bg-color-secondary));
    padding: var(--padding-sm);
    padding-right: 36px;
    margin-left: -8px;
    margin-right: -8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    border-radius: 6px;
    width: 287px;
    overflow: hidden
}

.univer-data-validation-item-container:hover {
    background-color: rgba(var(--grey-50))
}

.univer-data-validation-item-title {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-black));
    line-height: 22px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis
}

.univer-data-validation-item-content {
    color: rgba(var(--text-color-secondary));
    font-size: var(--font-size-xs);
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis
}

.univer-data-validation-item-icon {
    position: absolute;
    top: 19px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px
}

.univer-data-validation-item-icon:hover {
    background: rgba(var(--grey-200))
}

.univer-data-validation-list-buttons {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.univer-data-validation-list-button {
    margin-left: 12px
}

.univer-dv-list-dropdown {
    border-radius: var(--border-radius-lg);
    border: 1px solid rgb(var(--border-color));
    background: rgba(var(--color-white));
    box-shadow: var(--box-shadow-base);
    box-sizing: border-box
}

.univer-dv-list-dropdown-title {
    padding: var(--padding-sm) 14px;
    color: rgb(var(--text-color));
    font-size: 12px;
    line-height: 1.5;
    flex-shrink: 0;
    flex-grow: 0
}

.univer-dv-list-dropdown-list {
    max-height: 200px
}

.univer-dv-list-dropdown-list-container {
    padding: 0 var(--padding-sm)
}

.univer-dv-list-dropdown-selected-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: rgba(var(--blue-500));
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: 12px
}

.univer-dv-list-dropdown-item-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-xs) 6px;
    border-radius: 6px;
    margin-top: 4px;
    cursor: pointer
}

.univer-dv-list-dropdown-item-container:hover {
    background-color: rgba(var(--grey-50))
}

.univer-dv-list-dropdown-item {
    padding: 0 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    border-radius: 8px;
    height: 16px;
    width: fit-content;
    flex: 0 1 auto;
    text-overflow: ellipsis;
    overflow: hidden;
    color: rgba(var(--color-black));
    white-space: nowrap
}

.univer-dv-list-dropdown-split {
    height: 1px;
    margin: 4px 0;
    background: rgba(var(--grey-200));
    flex-shrink: 0;
    flex-grow: 0
}

.univer-dv-list-dropdown-edit {
    padding: 0 var(--padding-xs) var(--padding-xs) var(--padding-xs);
    flex-shrink: 0;
    flex-grow: 0
}

.univer-dv-list-dropdown-edit a {
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
    border-radius: 6px;
    display: block
}

.univer-dv-list-dropdown-edit a:hover {
    background: #f5f5f5
}

.univer-dv-date-dropdown {
    background: #fff;
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-lg);
    padding: var(--padding-sm)
}

.univer-dv-date-dropdown-btns {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid rgb(var(--border-color));
    padding-top: var(--padding-sm)
}

.univer-upload-loading {
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: rgba(var(--color-black),.5);
    z-index: 1000;
    user-select: none
}

.univer-upload-loading-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgb(var(--color-white));
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-items: center;
    border-radius: var(--border-radius-lg)
}

.univer-upload-loading-body-animation {
    width: 30px;
    height: 30px;
    border: 2px solid rgb(var(--color-black));
    border-top-color: transparent;
    border-radius: 100%;
    animation: univer-UniverCircleAnimation infinite .75s linear
}

.univer-upload-loading-body-text {
    font-size: var(--font-size-xs);
    color: var(--color-black);
    padding: 10px
}

@keyframes univer-UniverCircleAnimation {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.univer-upload-file-menu {
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center
}

.univer-upload-file-menu-input {
    display: none
}

.univer-image-common-panel {
    text-align: center;
    padding: var(--padding-sm);
    font-size: var(--font-size-sm)
}

.univer-image-common-panel-grid {
    position: relative;
    width: 100%
}

.univer-image-common-panel-border {
    border-top: 1px solid rgb(var(--border-color));
    margin-top: 20px
}

.univer-image-common-panel-title {
    color: rgb(var(--text-color-secondary));
    text-align: left
}

.univer-image-common-panel-subtitle {
    color: rgb(var(--text-color-primary));
    text-align: left
}

.univer-image-common-panel-row {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    margin-top: 10px
}

.univer-image-common-panel-row-vertical {
    justify-content: center;
    align-items: center;
    height: 36px
}

.univer-image-common-panel-column {
    width: 100%
}

.univer-image-common-panel-column-center {
    display: flex;
    justify-content: center;
    align-items: center
}

.univer-image-common-panel-inline {
    display: flex;
    align-items: center;
    gap: var(--margin-xxs)
}

.univer-image-common-panel-span2 {
    width: 50%
}

.univer-image-common-panel-span3 {
    width: 33.33333333%
}

.univer-image-common-panel-input {
    width: 90%
}

.univer-sheet-image-menu {
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center
}

.univer-sheet-image-menu-input {
    display: none
}

.univer-conditional-formatting-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.univer-conditional-formatting-wrap .univer-cf-rule-item {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.univer-conditional-formatting-wrap .univer-cf-rule-item .univer-preview {
    flex-shrink: 0
}

.univer-conditional-formatting-wrap .univer-create-rule {
    margin-bottom: 20px
}

.univer-conditional-formatting-wrap .univer-create-rule .univer-button {
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-base);
    cursor: pointer;
    font-size: var(--font-size-sm)
}

.univer-conditional-formatting-wrap .univer-title {
    margin-top: var(--margin-base);
    font-size: 15px;
    color: rgb(var(--text-color-secondary))
}

.univer-conditional-formatting-wrap .univer-label {
    font-size: 12px;
    margin-top: var(--margin-sm);
    color: rgb(var(--text-color-secondary))
}

.univer-conditional-formatting-wrap .univer-label-container {
    display: flex;
    align-items: center
}

.univer-conditional-formatting-wrap .univer-label-container .univer-input-width {
    width: 100px
}

.univer-conditional-formatting-wrap .univer-m-t-base {
    margin-top: var(--margin-base)
}

.univer-conditional-formatting-wrap .univer-m-t-sm {
    margin-top: var(--margin-sm)
}

.univer-conditional-formatting-wrap .univer-m-t-xl {
    margin-top: var(--margin-xl)
}

.univer-conditional-formatting-wrap .univer-m-l-sm {
    margin-left: var(--margin-sm)
}

.univer-conditional-formatting-wrap .univer-m-l-xl {
    margin-left: var(--margin-xl)
}

.univer-conditional-formatting-wrap .univer-m-l-xxs {
    margin-left: var(--margin-xxs)
}

.univer-conditional-formatting-wrap .univer-m-l-0 {
    margin-left: 0
}

.univer-conditional-formatting-wrap .univer-m-r-0 {
    margin-right: 0
}

.react-grid-layout {
    position: relative;
    transition: height .2s ease
}

.react-grid-item {
    transition: all .2s ease;
    transition-property: left,top,width,height
}

.react-grid-item img {
    pointer-events: none;
    user-select: none
}

.react-grid-item.cssTransforms {
    transition-property: transform,width,height
}

.react-grid-item.resizing {
    transition: none;
    z-index: 1;
    will-change: width,height
}

.react-grid-item.react-draggable-dragging {
    transition: none;
    z-index: 3;
    will-change: transform
}

.react-grid-item.dropping {
    visibility: hidden
}

.react-grid-item.react-grid-placeholder {
    background: red;
    opacity: .2;
    transition-duration: .1s;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
    transition: none
}

.react-grid-item>.react-resizable-handle {
    position: absolute;
    width: 20px;
    height: 20px
}

.react-grid-item>.react-resizable-handle:after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 5px;
    height: 5px;
    border-right: 2px solid rgba(0,0,0,.4);
    border-bottom: 2px solid rgba(0,0,0,.4)
}

.react-resizable-hide>.react-resizable-handle {
    display: none
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-sw {
    bottom: 0;
    left: 0;
    cursor: sw-resize;
    transform: rotate(90deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-se {
    bottom: 0;
    right: 0;
    cursor: se-resize
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-nw {
    top: 0;
    left: 0;
    cursor: nw-resize;
    transform: rotate(180deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-ne {
    top: 0;
    right: 0;
    cursor: ne-resize;
    transform: rotate(270deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e {
    top: 50%;
    margin-top: -10px;
    cursor: ew-resize
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-w {
    left: 0;
    transform: rotate(135deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-e {
    right: 0;
    transform: rotate(315deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s {
    left: 50%;
    margin-left: -10px;
    cursor: ns-resize
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-n {
    top: 0;
    transform: rotate(225deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-s {
    bottom: 0;
    transform: rotate(45deg)
}

.react-resizable {
    position: relative
}

.react-resizable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    background-image: url();
    background-position: bottom right;
    padding: 0 3px 3px 0
}

.react-resizable-handle-sw {
    bottom: 0;
    left: 0;
    cursor: sw-resize;
    transform: rotate(90deg)
}

.react-resizable-handle-se {
    bottom: 0;
    right: 0;
    cursor: se-resize
}

.react-resizable-handle-nw {
    top: 0;
    left: 0;
    cursor: nw-resize;
    transform: rotate(180deg)
}

.react-resizable-handle-ne {
    top: 0;
    right: 0;
    cursor: ne-resize;
    transform: rotate(270deg)
}

.react-resizable-handle-w,.react-resizable-handle-e {
    top: 50%;
    margin-top: -10px;
    cursor: ew-resize
}

.react-resizable-handle-w {
    left: 0;
    transform: rotate(135deg)
}

.react-resizable-handle-e {
    right: 0;
    transform: rotate(315deg)
}

.react-resizable-handle-n,.react-resizable-handle-s {
    left: 50%;
    margin-left: -10px;
    cursor: ns-resize
}

.react-resizable-handle-n {
    top: 0;
    transform: rotate(225deg)
}

.react-resizable-handle-s {
    bottom: 0;
    transform: rotate(45deg)
}

.univer-cf-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    min-width: 72px;
    height: 20px;
    font-size: 12px
}

.univer-cf-rule-list .univer-rule-selector {
    color: rgb(var(--text-color-secondary));
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.univer-cf-rule-list .univer-rule-selector .univer-select {
    color: rgb(var(--text-color));
    width: 138px
}

.univer-cf-rule-list .univer-rule-selector .univer-select .univer-select-selector {
    border: none;
    padding: 0
}

.univer-cf-rule-list .univer-rule-selector .univer-select .univer-select-selection-item {
    top: -2px;
    left: 4px
}

.univer-cf-rule-list .univer-rule-selector .univer-select .univer-select-selection-search-input {
    cursor: pointer
}

.univer-cf-rule-list .univer-rule-selector .univer-btn-list {
    font-size: 16px;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-gap {
    margin-left: 8px
}

.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-icon {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    padding: 4px
}

.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-icon:hover {
    background: rgb(var(--grey-300))
}

.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-disabled {
    color: rgb(var(--grey-500));
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 4px
}

.univer-cf-rule-list .univer-rule-item {
    padding: 8px 32px 8px 20px;
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    border-radius: var(--border-radius-base)
}

.univer-cf-rule-list .univer-rule-item .univer-rule-describe {
    max-width: 100%;
    min-width: 0px;
    overflow: hidden;
    flex-shrink: 1;
    font-size: var(--font-size-sm);
    line-height: 21px
}

.univer-cf-rule-list .univer-rule-item .univer-rule-describe .univer-rule-type {
    font-size: 14px;
    line-height: 22px;
    color: #1e222b
}

.univer-cf-rule-list .univer-rule-item .univer-rule-describe .univer-rule-range {
    font-size: 12px;
    line-height: 22px;
    color: #7a7a7a
}

.univer-cf-rule-list .univer-rule-item:hover,.univer-cf-rule-list .univer-rule-item.univer-active {
    background-color: rgb(var(--grey-100))
}

.univer-cf-rule-list .univer-rule-item .univer-draggableHandle {
    display: none;
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--border-radius-base);
    cursor: grab
}

.univer-cf-rule-list .univer-rule-item:hover .univer-delete-item,.univer-cf-rule-list .univer-rule-item:hover .univer-draggableHandle {
    display: flex;
    align-items: center;
    justify-content: center
}

.univer-cf-rule-list .univer-rule-item .univer-delete-item {
    display: none;
    cursor: pointer;
    border-radius: var(--border-radius-base);
    position: absolute;
    right: 4px;
    width: 24px;
    height: 24px
}

.univer-cf-rule-list .univer-rule-item .univer-delete-item:hover {
    background-color: rgb(var(--grey-300))
}

.univer-cf-rule-list .univer-rule-item .univer-active {
    display: flex;
    align-items: center;
    justify-content: center
}

.univer-cf-rule-list .univer-grid-layout-wrap {
    width: calc(100% - 2 * var(--padding-sm) + 2 * var(--padding-xl));
    margin-left: calc(-1 * var(--padding-xl));
    padding-left: var(--padding-sm)
}

.univer-cf-rule-list .univer-grid-layout-wrap .univer-react-grid-item {
    transition: none
}

.react-grid-item.react-grid-placeholder {
    background: rgb(var(--grey-300))
}

.univer-cf-color-picker {
    padding: var(--padding-base);
    font-size: var(--font-size-xs);
    list-style: none;
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    outline: none;
    box-shadow: var(--box-shadow-base)
}

.univer-cf-color-picker-icon {
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center
}

.univer-cf-color-picker-icon:hover {
    background: rgb(var(--bg-color-hover));
    border-radius: var(--border-radius-base)
}

.univer-cf-color-picker-icon .univer-icon-dropdown {
    font-size: 8px;
    color: rgb(var(--text-color-secondary));
    margin-left: 6px
}

.univer-cf-rule-style-editor .univer-cf-preview-wrap {
    margin-top: var(--margin-sm);
    padding: var(--padding-xs) var(--padding-sm);
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base)
}

.univer-cf-rule-style-editor .univer-text {
    font-size: var(--font-size-xxs)
}

.univer-cf-rule-style-editor .univer-position-relative {
    position: relative
}

.univer-cf-rule-style-editor .univer-btn-list {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--margin-base)
}

.univer-cf-rule-style-editor .univer-util-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--font-size-xxs)
}

.univer-cf-rule-style-editor .univer-icon-set .univer-render-config {
    display: flex;
    align-items: center;
    font-size: var(--font-size-xxs);
    justify-content: flex-start
}

.univer-cf-rule-style-editor .univer-icon-set .univer-flex {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.univer-cf-rule-style-editor .univer-icon-set .univer-width45 {
    width: 45%
}

.univer-cf-rule-style-editor .univer-icon-set .univer-icon-wrap {
    display: flex;
    align-items: center
}

.univer-cf-rule-style-editor .univer-icon-set .univer-icon {
    width: 20px;
    height: 20px
}

.univer-cf-rule-style-editor .univer-icon-set .univer-dropdown-icon {
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base);
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: var(--padding-sm) var(--padding-lg);
    font-size: var(--font-size-xxs);
    color: rgb(var(--text-color-secondary));
    transition: all .15s
}

.univer-cf-rule-style-editor .univer-icon-set .univer-dropdown-icon:hover {
    border-color: rgb(var(--primary-color))!important
}

.univer-cf-rule-style-editor .univer-icon-set .univer-dropdown-icon .univer-icon {
    width: 16px;
    height: 16px
}

.univer-cf-rule-style-editor .univer-icon-set .univer-error-input {
    border: 1px solid rgb(var(--red-400))
}

.univer-cf-rule-style-editor .univer-icon-set .univer-error-text {
    color: rgb(var(--red-400));
    font-size: 12px;
    position: absolute
}

.univer-icon-group-list {
    padding: var(--padding-base);
    font-size: var(--font-size-xs);
    box-sizing: border-box;
    width: 328px;
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    outline: none;
    box-shadow: var(--box-shadow-base)
}

.univer-icon-group-list .univer-title {
    font-size: 13px;
    margin-bottom: var(--margin-xxs)
}

.univer-icon-group-list .univer-group {
    margin-bottom: var(--margin-sm)
}

.univer-icon-group-list .univer-item-content {
    display: flex;
    flex-wrap: wrap
}

.univer-icon-group-list .univer-item-content .univer-item-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 50%;
    margin-bottom: 4px
}

.univer-icon-group-list .univer-item-content .univer-item-wrap .univer-item {
    border-radius: var(--border-radius-base);
    cursor: pointer
}

.univer-icon-group-list .univer-item-content .univer-item-wrap .univer-item :not(:first-child).univer-icon {
    margin-left: 8px
}

.univer-icon-group-list .univer-item-content .univer-item-wrap .univer-item:hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-icon-group-list .univer-item-content .univer-item-wrap :not(:first-child).univer-icon {
    margin-left: 8px
}

.univer-icon-group-list .univer-icon {
    width: 20px;
    height: 20px
}

.univer-icon-item-list-wrap {
    padding: var(--padding-base) 4px var(--padding-base) var(--padding-base);
    font-size: var(--font-size-xs);
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    outline: none;
    box-shadow: var(--box-shadow-base)
}

.univer-icon-item-list-wrap .univer-none {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    padding-left: 4px
}

.univer-icon-item-list-wrap .univer-none span {
    margin-left: 8px
}

.univer-icon-item-list-wrap .univer-icon-item-list {
    display: flex;
    width: 252px;
    flex-wrap: wrap
}

.univer-icon-item-list-wrap .univer-icon-item-list .univer-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-base);
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer
}

.univer-icon-item-list-wrap .univer-icon-item-list .univer-item:hover {
    background-color: rgb(var(--bg-color-hover))
}

.univer-icon-item-list-wrap .univer-icon-item-list .univer-icon {
    width: 20px;
    height: 20px
}

.univer-width100 {
    width: 100%
}

.univer-stress {
    color: rgb(var(--text-color));
    font-weight: 500
}

.univer-cf-style-edit {
    display: flex;
    justify-content: space-between;
    margin: 10px 0
}

.univer-cf-style-edit .univer-button-item {
    cursor: pointer;
    border-radius: var(--border-radius-base);
    display: flex;
    align-items: center;
    padding: 0 3px
}

.univer-cf-style-edit .univer-button-item:hover,.univer-cf-style-edit .univer-isActive {
    background-color: rgb(var(--grey-100))
}

.univer-sheets-filter-panel {
    display: flex;
    min-width: 312px;
    height: 432px;
    flex-direction: column;
    background: rgb(var(--bg-color-secondary));
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: var(--box-shadow-lg);
    padding: 16px;
    overflow: hidden
}

.univer-sheets-filter-panel-header {
    flex-grow: 0;
    flex-shrink: 0;
    margin-bottom: 4px
}

.univer-sheets-filter-panel-content {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    padding-top: 8px
}

.univer-sheets-filter-panel-select-all {
    font-size: 13px;
    margin-right: 4px
}

.univer-sheets-filter-panel-select-all-count {
    font-size: 13px;
    color: rgb(var(--grey-400))
}

.univer-sheets-filter-panel-values-container {
    display: flex;
    height: 100%;
    flex-direction: column
}

.univer-sheets-filter-panel-values-container>.univer-input-affix-wrapper {
    flex: 0 0 32px
}

.univer-sheets-filter-panel-values-container .univer-select,.univer-sheets-filter-panel-values-container .univer-input-affix-wrapper,.univer-sheets-filter-panel-values-container .univer-radio-group {
    width: 100%
}

.univer-sheets-filter-panel-values-find {
    height: 32px;
    margin-bottom: 8px
}

.univer-sheets-filter-panel-values-list {
    flex-grow: 1;
    margin-top: 8px;
    border: 1px solid rgb(var(--grey-200));
    box-sizing: border-box;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 6px 0 6px 8px
}

.univer-sheets-filter-panel-values-list-inner-container {
    padding-right: 8px
}

.univer-sheets-filter-panel-values-virtual {
    flex-grow: 1
}

.univer-sheets-filter-panel-values-item {
    box-sizing: border-box;
    height: 32px;
    padding: 2px 0;
    width: 100%
}

.univer-sheets-filter-panel-values-item-inner {
    align-items: center;
    padding: 0 2px 0 24px;
    line-height: 28px;
    box-sizing: border-box;
    border-radius: 6px;
    height: 28px;
    display: flex;
    font-size: 13px
}

.univer-sheets-filter-panel-values-item-inner:hover {
    background-color: rgb(var(--grey-50))
}

.univer-sheets-filter-panel-values-item-inner:hover .univer-sheets-filter-panel-values-item-count {
    margin-right: 2px
}

.univer-sheets-filter-panel-values-item-inner:hover .univer-sheets-filter-panel-values-item-exclude-button {
    box-sizing: border-box;
    margin-left: auto;
    display: inline-block;
    height: 24px;
    font-size: 12px;
    line-height: 12px
}

.univer-sheets-filter-panel-values-item-inner:hover .univer-sheets-filter-panel-values-item-exclude-button:hover {
    background-color: rgb(var(--hyacinth-50))
}

.univer-sheets-filter-panel-values-item-inner:hover .univer-sheets-filter-panel-values-item-exclude-button:active {
    background-color: rgb(var(--hyacinth-100))
}

.univer-sheets-filter-panel-values-item-text {
    display: inline-block;
    height: 100%;
    margin: 0 4px;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.univer-sheets-filter-panel-values-item-count {
    color: rgb(var(--grey-400))
}

.univer-sheets-filter-panel-values-item-exclude-button {
    display: none
}

.univer-sheets-filter-panel-conditions-container {
    display: flex;
    flex-direction: column;
    height: 100%
}

.univer-sheets-filter-panel-conditions-container .univer-select,.univer-sheets-filter-panel-conditions-container .univer-input-affix-wrapper,.univer-sheets-filter-panel-conditions-container .univer-radio-group {
    width: 100%;
    margin-bottom: 8px
}

.univer-sheets-filter-panel-conditions-container-inner {
    flex-grow: 1;
    border-radius: 6px;
    border: 1px solid rgb(var(--grey-200));
    overflow: hidden;
    padding: 8px
}

.univer-sheets-filter-panel-conditions-desc {
    margin-top: -6px;
    color: rgb(var(--grey-500));
    font-size: 12px;
    line-height: 18px
}

.univer-sheets-filter-panel-footer {
    margin-top: 16px;
    flex-grow: 0;
    flex-shrink: 0;
    display: inline-flex;
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: space-between
}

.univer-sheets-filter-panel-footer-primary-buttons {
    display: flex
}

.univer-sheets-filter-panel-footer-primary-buttons>.univer-button {
    margin-left: 12px
}

.univer-sheets-filter-panel .univer-select,.univer-sheets-filter-panel .univer-input {
    width: 100%
}

.univer-sheets-filter-panel .univer-form-dual-column-layout {
    margin-bottom: 8px
}

.univer-extend-confirm-content {
    font-size: 14px
}

.univer-extend-confirm-radio-group {
    margin-top: 16px
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-ext {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-ext .univer-add-condition {
    color: var(---Hyacinth-Blue-500, #274fee);
    font-size: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-ext .univer-add-condition-text {
    margin-left: 6px;
    font-size: 12px
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-ext .univer-add-condition-disable {
    color: var(---Black, #1e222b);
    opacity: .3;
    cursor: not-allowed
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-footer {
    margin-top: 20px;
    display: flex;
    justify-content: end
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-footer-btn {
    margin-left: 12px
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-200)
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-item-head {
    display: flex;
    align-items: center
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-item-handler {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e222b;
    cursor: pointer
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-item-remove {
    font-size: 14px;
    color: #4b4b4b;
    cursor: pointer;
    width: 14px;
    height: 14px;
    position: absolute;
    right: 0
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-item-column-input {
    display: flex;
    width: 236px;
    padding: 6px 10px;
    justify-content: space-between;
    align-items: center;
    margin-left: 8px;
    border-radius: 6px;
    border: 1px solid var(---Grey-200, #e5e5e5);
    background: var(---White, #fff);
    color: var(---Black, #1e222b);
    font-family: PingFang SC;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    overflow: hidden
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-item-column-input-dropdown {
    width: 16px;
    height: 16px;
    color: #4b4b4b
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-item-column-input-text {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-item-order-radio {
    display: flex;
    padding: 0 10px
}

.univer-custom-sort-panel-container .univer-custom-sort-panel-item-order-radio-cn {
    display: flex;
    padding: 0 20px
}

.univer-custom-sort-panel-container .univer-condition-list {
    max-height: 310px;
    overflow-y: auto;
    overflow-x: hidden
}

.univer-embed-sort-btn-container {
    display: flex;
    margin-bottom: 12px
}

.univer-embed-sort-btn-container .univer-embed-sort-btn {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    display: flex;
    width: 140px;
    padding: 6px 0;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border: 1px solid var(---Grey-200, #e5e5e5);
    cursor: default
}

.univer-embed-sort-btn-container .univer-embed-sort-btn:active {
    background: #1e222b17
}

.univer-embed-sort-btn-container .univer-embed-sort-btn:hover {
    background: var(--black-6, rgba(30, 34, 43, .06))
}

.univer-embed-sort-btn-container .univer-embed-sort-btn-asc {
    border-radius: 6px 0 0 6px
}

.univer-embed-sort-btn-container .univer-embed-sort-btn-desc {
    border-radius: 0 6px 6px 0;
    margin-left: -1px
}

.univer-embed-sort-btn-container .univer-embed-sort-btn-icon {
    font-size: 16px;
    color: #1e222b;
    margin-right: 4px
}

.univer-custom-sort-col-menu {
    display: grid;
    gap: var(--margin-xxs);
    align-items: center;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--padding-sm);
    font-size: var(--font-size-base);
    background: var(---White, #fff);
    border: 1px solid var(--black-6, rgba(30, 34, 43, .06));
    border-radius: var(--Radius-4, 8px);
    box-shadow: 0 4px 12px 2px #1e222b1a;
    max-height: 310px;
    overflow-y: auto;
    overflow-x: hidden
}

.univer-custom-sort-col-menu li {
    list-style: none
}

.univer-custom-sort-col-menu-item {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 28px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    color: var(---Black, #1e222b);
    text-align: left;
    border-radius: 4px;
    border-radius: var(--border-radius-base);
    transition: background .2s
}

.univer-custom-sort-col-menu-item:hover {
    background: #f5f5f5
}

.univer-custom-sort-col-menu-item-desc {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.univer-thread-comment-editor-buttons {
    margin-top: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.univer-thread-comment-editor-suggestion {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: rgb(var(--color-black))
}

.univer-thread-comment-editor-suggestionActive {
    background-color: rgba(var(--grey-50))
}

.univer-thread-comment-editor-suggestion-icon {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    margin-right: 6px
}

.univer-thread-comment {
    padding: 16px;
    background: rgba(var(--color-white));
    border: 1px solid rgba(var(--grey-200));
    width: 279px;
    border-radius: 8px;
    box-sizing: border-box;
    position: relative
}

.univer-thread-comment-active {
    box-shadow: var(--box-shadow-base)
}

.univer-thread-comment-content {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: rgba(var(--scrollbar-color),.7) transparent;
    scrollbar-gutter: auto;
    scrollbar-width: thin
}

.univer-thread-comment-highlight {
    background-color: rgb(var(--gold-400));
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px
}

.univer-thread-comment-icon-container {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 0
}

.univer-thread-comment-icon {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    margin-left: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 16px
}

.univer-thread-comment-icon:hover {
    background-color: rgba(var(--grey-50))
}

.univer-thread-comment-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 20px
}

.univer-thread-comment-title-position {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1 1 0;
    overflow: hidden
}

.univer-thread-comment-title-highlight {
    width: 3px;
    height: 14px;
    border-radius: 1.5px;
    background-color: rgba(var(--gold-400));
    margin-right: 8px;
    flex-shrink: 0;
    flex-grow: 0
}

.univer-thread-comment-title-position-text {
    flex: 1 1 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.univer-thread-comment-username {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px
}

.univer-thread-comment-item {
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative
}

.univer-thread-comment-item-head {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0
}

.univer-thread-comment-item-title {
    display: flex;
    justify-content: space-between;
    height: 24px;
    align-items: center;
    margin-bottom: 4px
}

.univer-thread-comment-item-title-position {
    color: rgba(var(--color-black));
    font-size: 14px;
    line-height: 20px
}

.univer-thread-comment-item-title-highlight {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    margin-right: 8px;
    margin-top: 3px;
    background-color: rgba(var(--gold-400))
}

.univer-thread-comment-item-time {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 4px;
    color: rgba(var(--grey-600))
}

.univer-thread-comment-item-content {
    font-size: 13px;
    line-height: 20px;
    word-break: break-all;
    color: rgba(var(--color-black))
}

.univer-thread-comment-item-at {
    color: rgba(var(--blue-400))
}

.univer-thread-comment-panel {
    min-height: 100%;
    display: flex;
    flex-direction: column
}

.univer-thread-comment-panel .univer-thread-comment {
    margin-top: 12px
}

.univer-thread-comment-panel-forms {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 12px
}

.univer-thread-comment-panel-forms .univer-select {
    width: 120px
}

.univer-thread-comment-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgb(var(--grey-600));
    font-size: 13px;
    flex: 1
}

.univer-thread-comment-panel-add {
    margin-top: 8px;
    display: flex;
    flex-direction: row
}

.univer-thread-comment-panel-add svg {
    margin-right: 6px
}

.univer-cell-link-edit-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.univer-cell-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    box-shadow: var(--box-shadow-base);
    border-radius: 8px;
    border: 1px solid rgb(var(--grey-200));
    background: rgb(var(--color-white));
    max-width: 328px;
    overflow: hidden
}

.univer-cell-link-type {
    height: 20px;
    width: 20px;
    font-size: 16px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgb(var(--color-black))
}

.univer-cell-link-content {
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 13px;
    line-height: 20px;
    color: rgb(var(--blue-500));
    cursor: pointer;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.univer-cell-link-content-error {
    color: rgb(var(--grey-500))
}

.univer-cell-link-url {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis
}

.univer-cell-link-operations {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 24px;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0
}

.univer-cell-link-operation {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 4px
}

.univer-cell-link-operation-error {
    color: rgb(var(--grey-500))
}

.univer-cell-link-operation:hover {
    background: #ccc
}

.univer-doc-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    box-shadow: var(--box-shadow-base);
    border-radius: 8px;
    border: 1px solid rgb(var(--grey-200));
    background: rgb(var(--color-white));
    max-width: 328px;
    overflow: hidden
}

.univer-doc-link-type {
    height: 20px;
    width: 20px;
    font-size: 16px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgb(var(--color-black))
}

.univer-doc-link-content {
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 13px;
    line-height: 20px;
    color: rgb(var(--blue-500));
    cursor: pointer;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.univer-doc-link-content-error {
    color: rgb(var(--grey-500))
}

.univer-doc-link-url {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis
}

.univer-doc-link-operations {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 24px;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0
}

.univer-doc-link-operation {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 4px
}

.univer-doc-link-operation-error {
    color: rgb(var(--grey-500))
}

.univer-doc-link-operation:hover {
    background: #ccc
}

.univer-docs-link-edit {
    border-radius: 12px;
    border: 1px solid rgb(var(--grey-200));
    background: rgb(var(--color-white));
    box-shadow: var(--box-shadow-base);
    padding: 20px 24px;
    width: 328px
}

.univer-docs-link-edit-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 16px;
    color: rgb(var(--color-black))
}

.univer-docs-link-edit-close {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: rgb(var(--grey-600));
    cursor: pointer
}

.univer-docs-link-edit-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.univer-docs-link-edit-button {
    margin-left: 12px
}

.univer-slide-bar {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f5f7f9;
    border-right: 1px solid #eaecf0;
    width: 260px;
    overflow-x: hidden;
    overflow-y: auto
}

.univer-slide-bar .univer-slide-bar-content {
    padding: 0 15px
}

.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item {
    display: flex;
    margin: 15px 0
}

.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item span {
    width: 15px;
    font-size: 12px
}

.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item .univer-slide-bar-box {
    position: relative;
    width: 212px;
    height: 120px;
    margin-left: 5px;
    background: #fff;
    border: 2px solid #c0c0c0
}

.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item .univer-slide-bar-box:hover {
    border: 2px solid #d66a2b
}

.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item-active span {
    color: #d66a2b
}

.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item-active .univer-slide-bar-box {
    border: 2px solid #d66a2b
}

.univer-slide-bar .univer-slide-add-button {
    padding: 10px 0;
    text-align: center
}

.univer-slide-bar .univer-slide-add-button button {
    width: 45px;
    height: auto;
    font-size: 24px;
    line-height: 1;
    border-radius: 10px
}

.univer-find-replace-dialog-container {
    display: block
}

.univer-find-replace-expand-container {
    margin-top: 16px;
    text-align: center
}

.univer-find-replace-expand-container .univer-button-text {
    color: rgb(var(--primary-color))
}

.univer-find-replace-buttons-group {
    display: flex;
    justify-content: space-between;
    margin-top: 24px
}

.univer-find-replace-buttons-group-right>button:not(:first-child) {
    margin-left: 8px
}

.univer-script-editor-panel {
    height: 100%
}

.univer-script-editor-content {
    overflow: hidden;
    width: 100%;
    height: calc(100% - 60px)
}

.univer-script-editor-actions {
    margin-top: 10px
}
